How to get an image to fade in when the mouse is hovered over?

Question

I received this tip:

.container img{
     width:125px;
     margin;0;
     padding:0;
     opacity:0.5;
}
.container img:hover{
   opacity:1;
}

Tried it and it worked great!

I then used a light version of a Custom CSS Editor Plugin - popped the code into it and added the class container <p class="container"> to the images and it worked.

your question does not include a detailed description of your problem, any previous attempts, any existing code or further information, as well as not many words. it *does* contain a link, though - this could be borderline to spam. — Franz Gleichmann, Dec 19 '16 at 06:50
Thank you for all your effort - **apologies** for lack of information. I will better details when I next post. In the meantime Anuja Agarwal has provided me with information to work with - so than you. Cliff — Cliff, Dec 19 '16 at 06:59

score 0 · Accepted Answer · answered Dec 19 '16 at 06:41

you can use opacity property for the image:

.container img{
  width:300px;
  margin;0;
  padding:0;
  opacity:0.5;
}
.container img:hover{
  opacity:1;
}

<div class="container">
  <img src="http://www.booths.co.uk/wp-content/uploads/640px-X-360px-Chocolate-MiniNests.jpg"/>
</div>

How to get an image to fade in when the mouse is hovered over?

1 Answers1