Fade on mouse hover like "Latest News"


#1

I would like to fade my image out on mouse hover exactly like seen on “Latest News” posts (to maintain a standart), but i’m noob and can’t find it in the code.

I am currently using a custom CSS plugin to make fade effects but i cannot replicate the one on latest news (i do not use a child theme).

I am using a maintenace page so ill not link my site here yet.


#2

You can use it like this:


.entry-thumb img {
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
}
.entry-thumb img:hover {
    opacity: 0.7;
}

And change the class as you need.


#3

Am i doing something wrong?

.vanish img {
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
}
.vanish img:hover {
    opacity: 0.7;
}


#4
<a href="http://facebook.com"><img class="vanish" 
src="http://masterclube.com/wp-content/uploads/2014/12/MG_5782.jpg" 
alt="imageeeem" width="350" height="450" /></a>

#5

Yeap.


.vanish {
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
}
.vanish:hover {
    opacity: 0.7;
}


#6

OMG! i’m sorry!

Thank you so much! :slight_smile: