使悬停和其他CSS细节上的图片变暗

Question

Hello people from StackOverflow. I'm trying to do something exactly like in this website: http://anayafilms.com/ (work section). It's basically an image but on mouse over, it gets darken, a text at the bottom and two "buttons" (just some font awesome icons in a circle), along with some basic animation. So far I only have the image in a div and no idea on how to do that, so if anyone can help me out that'd be amazing.

Before and after, just to illustrate it in case you don't wanna go on the website

Answer 1

Depending on what you really need it to do, you might be able to do this without javascript. Here is an example that makes use of the css pseudo class :hover and some absolute positioning. I'm darkening the background, which you can set as an image, by using a layer above it with a opacity: .5 black background created using background: rgba(0,0,0,.5) .

 .css-rollover { width: 300px; height: 200px; overflow: hidden; position: relative; } .css-rollover:hover .overlay { opacity: 1; pointer-events: all; } .bg { width: 100%; height: 100%; background: red; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); text-align: center; color: #fff; opacity: 0; pointer-events: 0; transition: opacity .2s; } .overlay p { position: absolute; bottom: 20px; left: 50%; transform: translateX( -50% ); } .overlay .fa-links { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .overlay .fa-links a { display: inline-block; width: 20px; height: 20px; line-height:20px; border-radius: 50%; margin: 5px; padding: 5px; background: blue; text-decoration: none; color: #fff; } 

 <div class="css-rollover"> <div class="bg" ></div> <div class="overlay"> <div class="fa-links"> <a href="#">A</a> <a href="#">B</a> </div> <p>You're hovering...</p></div> </div>