In the home page of my website, I have a series of images that link to the blog post related to it. I would like to add a fade in effect to those images.

I would like to have them black and white initially, and have the colors fade in when house hovered.

http://css3.bradshawenterprises.com/cfimg/
Here, demo 1 shows exactly what I want to achieve (I would have two images prepared: black and white, color).
I tried using the code posted on the website, but with X theme, I am still confused on where to type in specific css attributes for certain classes.

For example, let’s say I go to Pages > Add new and give it the content below using the text editor.

.img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

.crossfade img.top:hover {
opacity:0;
}
(Here, I am using the coded provided in the link above, and just changing the images.)

<div class=”crossfade”>


</div>

When I load the page, it will not recognize the CSS attributes and just print the text as is.

I see that there is a “Body CSS Class(es)” under the setting, but I have no idea how to utilize it.
Where must I put the CSS codes for them to work properly?

As always, many thanks.

Thanks for posting in!

This should be the format of your code. You forgot to add a class=”top” to your second image that will be displayed when you hover it.

<div class="crossfade">
<img src="http://www.dqualify.com/wp-content/uploads/2015/03/BlackInfra_Nike_cover.jpg" alt="descrp" />
<img class="top" src="http://www.dqualify.com/wp-content/uploads/2015/03/Columbia_Nike_cover.jpg" alt="asd" />
</div>

Most modern browsers has now the capability of using filters via css. Why don’t you give it a try. Please check it out here: http://labs.voronianski.com/css3-grayscale/

Hope this helps. Kindly let us know.

Your HTML should be:

<div id="crossfade">
 <img class="bottom" src="http://www.dqualify.com/wp-content/uploads/2015/03/BlackInfra_Nike_cover.jpg" alt="descrp">
 <img class="top" src="http://www.dqualify.com/wp-content/uploads/2015/03/Columbia_Nike_cover.jpg" alt="asd">
</div>

*Take note of the class=”bottom” and class=”top” on images above.

Please add the following CSS code in your Customizer via Appearance > Customize > Custom > CSS:

#crossfade{
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#crossfade img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#crossfade img.top:hover {
  opacity:0;
}

Hope this helps.
Thanks.

Let us know if you need anything else.

Thanks. Have a great day! 🙂