Photoshop Question posted in
The official user guide can be found here.

Picture color overlay in CSS – Photoshop

Hello I have a picture made in photoshop. It’s only one color (symbol of html). It’s made from #d66a00 (shade of orange) color. I need to add effect on hover, that picture slowly pass to another color.

For example. I have a picture on site, it is orange. When I go with mouse over the picture, he will change from orange to blue. Is something like this possible with CSS3, or javascript, or I will need to use two pictures and change background in CSS?

Tags:

2

Answers


  1. 0

    EDIT In response to your reply:

    Then you have three options.

    First option is like you suggested to create two images, put them behind eachother and use css to change the opacity of the front image. This method is the worst for page loading time.

    The second option is to change the image in Photoshop in such a way so that the dark orange part is transparent (0% opacity) and the light orange part is transparent white, with about 10% opacity.
    In css then, put a background on the image of #d66a00. On hover, change this background to blue.

    The last option is to use an svg of the image (like https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg)
    and to embed it in the html (see http://www.w3schools.com/svg/svg_inhtml.asp) So you copy the entire svg code inside the html. Then you can manipulate all the parts of the svg using css. You can add classes to svg elements, and using css, change their ‘fill’ (which is background in svg)

    first answer:

    If I understand correctly, your picture is an rectangle that is uniformly the color #d66a00?

    In that case you can create a div with this color as a background, instead of using an image. And then on hover, change the color.

    <style>
    .orange-rectangle{
        background-color:#d66a00;
        width:5em;
        height:5em;
        transition:background-color 200ms;
    }
    .orange-rectangle:hover{
        background-color:blue;
    }
</style>
<div class="orange-rectangle"></div>
    Login or Signup to reply.
  2. 0

    The way I handle this is by creating two images and hiding/displaying the images on hover.

    The image holder div holds the images you want to replace – and when it is hovered over the image with the class defaultImage disappears and is replaced by the image with class hoverImage.

    <style>
      .imageHolder .defaultImage {
           display:inherit;
      }
      .imageHolder .hoverImage{
           display:none;
      }
      .imageHolder:hover .defaultImage {
           display:inherit;
      }
      .imageHolder:hover .hoverImage{
           display:none;
      }
 </style>

 <div class = 'imageHolder'>
      <img src = 'path/to/first/image.jpg' class = 'defaultImage'>
      <img src = 'path/to/second/image.jpg' class = 'hoverImage'>
 </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search