ughhope 0 Report post Posted August 18, 2019 Hey! I'm new at coding and just have two questions regarding an image hover overlay fade code. Here's a link for what I'm referencing: https://www.w3schools.com/css/css3_images.asp This is what I'm working with: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade Would love to insert my own picture instead of the default avatar they give but I'm confused on how to do so. Is anyone able to help guide me through that? Second question: If I wanted a user to click on this image to go to another link, how would I code that? I'm having trouble understanding how to insert that clickable feature. Thank you if you can help! I appreciate it. Quote Share this post Link to post Share on other sites
Funce 42 Report post Posted August 19, 2019 In the HTML code, there are references to the words that are shown, and the image that is shown. <div class="container"> <img src="img_avatar.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div> Replace img_avatar.png with the file name of your own picture on your site to include yours, and change "Hello World" to whatever you would like written when you hover over it. To make this a link, you should be able to apply an <a> tag around the container with the link you want it to travel to. If you instead want a button inside your text area, you can put your <a> tag in there. Quote Share this post Link to post Share on other sites
ishan_shah 1 Report post Posted October 10, 2019 (edited) Hi @ughhope, I have tried to code as per your requirement. I think you should try this once. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { position: relative; width: 50%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #008CBA; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } </style> </head> <body> <h2>Fade in Overlay</h2> <p>Hover over the image to see the effect.</p> <div class="container"> <img src="https://www.roadtestreviews.com/wp-content/uploads/2014/11/mustang-batcave-017.jpg" alt="Avatar" class="image"> <a href="https://www.google.com/" class="overlay"></a> </div> </body> </html> I hope it will work as per your requirements. I have also added an anchor tag for your second query. Edited October 10, 2019 by ishan_shah Quote Share this post Link to post Share on other sites
