Overlay an opacified image with an icon

Question

Basically what I'm trying to do is overlay an image with an icon ( display: none at first), then add a hover effect to show up the icon and opacify the image. It doesn't work.

So is there any way to overlay an icon on top of an opacified image?

Example: https://jsfiddle.net/w084goLp/1/

 .icon { font-size: 10em; position: absolute; color: white; } img { // opacity: 0.7; // Cannot overlay opacified image? } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <div class="icon"> <i class="fa fa-play-circle-o" aria-hidden="true"></i> </div> <div class="thumbnail"> <img src="https://cdn.lynda.com/courses/457872-635961558500122446_270x480_thumb.jpg"> </div> 

Answer 1

Basically you have to move the icon into the .thumbnail wrapper, to apply an effect on hover over .thumbnail . Then you just can set display: block; on hover and your icon appears.

You also need to give .icon a z-index greater than zero because of your positioning or you put it after the thumbnail image in your markup. Plus you can easily position your .icon in the center of .thumbnail just because it is a child of it.

 .thumbnail { position: relative; display: inline-block; } .icon { display: none; font-size: 10em; position: absolute; color: white; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); } .thumbnail:hover img { opacity: 0.7; } .thumbnail:hover .icon { display: block; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <div class="thumbnail"> <div class="icon"> <i class="fa fa-play-circle-o" aria-hidden="true"></i> </div> <img src="https://cdn.lynda.com/courses/457872-635961558500122446_270x480_thumb.jpg"> </div> 

Another possibility (if you don't have the option to put your .icon inside your .thumbnail ), you can place .icon after .thumbnail and use the adjacent sibling selector + . A disadvantage would be, that you can't use position to align your .icon relative to .thumbnail .

 .icon { display: none; font-size: 10em; position: absolute; color: white; z-index: 1; top: 0; left: 0; } .thumbnail:hover img { opacity: 0.7; } .thumbnail:hover + .icon { display: block; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <div class="thumbnail"> <img src="https://cdn.lynda.com/courses/457872-635961558500122446_270x480_thumb.jpg"> </div> <div class="icon"> <i class="fa fa-play-circle-o" aria-hidden="true"></i> </div>