In this tutorial, we will create a fade in hover overlay effect for images using CSS. This effect is useful for displaying additional information or context about an image when the user hovers their mouse over it. By the end of this tutorial, you will have a fully functional fade in hover overlay that you can use on your own website. So, if you want to learn how to create a fade in hover overlay image effect using CSS, be sure to watch this video at the end of this article.
tutorial5.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial 5</title> <link rel="stylesheet" href="css/tutorial5.css"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> </head> <body> <div class="img-wrapper"> <img src="image/sample.jpg"> <div class="text_wrapper"> <h1 id="top">SAMPLE</h1> <h1 id="bottom">TEXT</h1> </div> </div> </body> </html>
tutorial5.css*{ margin: 0; padding:0; } body{ overflow: hidden; height: auto; background-color: #ffcccc; width: 100%; } .img-wrapper{ width: 80%; height: auto; margin: 5% 10% 5% 10%; } img{ width: 100%; opacity: 1; display: block; transition: 0.5s ease; height: auto; } .text_wrapper{ opacity: 0; transition: 0.5s ease; background-color: #ffffff; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%, -50%); margin-top: -30%; width: 35%; height: auto; } .img-wrapper:hover .text_wrapper{ opacity: 0.9; } .img-wrapper:hover img{ opacity: 0.7; } h1{ text-align: center; width:100%; color: #585858; font-family: 'raleway', sans-serif; } #top{ font-size: 4.5vw; } #bottom{ font-size: 7vw; }
Watch Full Video Here!
Comments
Post a Comment