将鼠标悬停在CSS图像上并淡入

Question

I've been trying to create the following: Showing an image and when hovering over it, on the image a score will show, which fades in. I'm almost there, except for the fading in part.

My CSS:

 .profile-image10 { opacity: 1; } .profile-image10:hover .overlay { position: absolute; width: 100%; height: 100%; left: 510px; top: 8px; z-index: 2; background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat; -webkit-transition: opacity 1s ease-in; -moz-transition: opacity 1s ease-in; -ms-transition: opacity 1s ease-in; -o-transition: opacity 1s ease-in; transition: opacity 1s ease-in; opacity: 0.1; } 

 <div class="profile-image10"> <a href="#"><img src="https://www.w3schools.com/howto/img_fjords.jpg" /></a> <span class="overlay"></span> </div> 

I've created this fiddle: https://jsfiddle.net/1wusom4m/

As you can see it currently fades out when hovering, which is the opposite of what I want. So of course the opacity is set the wrong way around, but if I set it to a low value in the .profile-image10 it affects the original image as well. I'm quite new to this, so have been experimenting a lot to get this far, but I'm stuck now. So how can I make it fade in the score when hovering over the image? Or am I approaching this all wrong?

Answer 1

Three things.

1. Don't depend all style properties for your overlay on :hover state. Only those you want to change on :hover of the image.

2. Always define the transition property for the original state. You can change the reverse transition by additionally specifying it on the :hover state.

3. You div is a block level element, which by default grabs as much horizontal space as available. Putting the :hover on the div results in the fade effect being triggered even if you hover right of the picture (which probably is unwanted).

 .profile-image10 .overlay{ opacity: 0; position: absolute; width: 100%; height: 100%; left: 585px; top: 8px; z-index: 2; background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat; -webkit-transition: opacity 1s ease-in; -moz-transition: opacity 1s ease-in; -ms-transition: opacity 1s ease-in; -o-transition: opacity 1s ease-in; transition: opacity 1s ease-in; } .profile-image10 a:hover + .overlay { opacity: 1; } 

 <div class="profile-image10"> <a href="#"><img src="http://www.defilmkijker.com/wp-content/uploads/2018/01/Recensie-Three-Billboards-Outside-Ebbing-Missouri.jpg" class="alignnone size-full wp-image-19857 round" /></a> <span class="overlay"></span> </div> 

Fiddle: https://jsfiddle.net/1wusom4m/3/