How we can create multiple image overlay effects using HTML and CSS? Solution: See this CSS Image Overlay Effects On Hover, Multi Direction Overlay Effect.
Previously I have shared an image hover effect program there image moves on hover, but this is about overlay effect. Basically, when we hover on any image and almost transparent layer comes out over the image with content, that is an overlay. This type of effect you can see on many websites for showing info about the image.
Today you will learn to create Multi Direction Overlay Effect. Basically, there are 8 different overlay effects according to 8 different directions. Some of the directions example are: top, bottom, left, right, top left, bottom right, etc. When you will hover on any image box then the overlay will reveal from these directions.
So, Today I am sharing CSS Image Overlay Effects On Hover. There I have used pure HTML and CSS for creating this program, there is no JavaScript or any other library. All the effects are based on pure CSS command which we use on a daily bases. This program will useful for you if you are a beginner, also you can use these effects on your website.
If you are thinking now how these effects actually are, then see the preview given below.
Preview Of 8 Different Direction Overlay
See this video preview to getting an idea of how these effects look like.
Now you can see this visually, also you can these effects live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
CSS Image Overlay Effects On Hover Source Code
Before sharing source code, let’s talk about it. First, I have created 8 container divs with their contents using HTML. Inside a single container, I have placed a title, image, overlay div, overlay title, overlay description, and other divs for placing class names. I have used a single dummy image for all the effects and placed using simply <img src=""> method (info).
Now using CSS I have placed all the elements in the right place, as you can see in the preview. All the effects are based on CSS direction commands top, left, right, bottom. With these commands, I have used the transition to creating the animation effect. And this program is responsive, it will fit on small screen size like mobile. For creating that, I have used CSS @media query.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Image Overlay Hover Effects | Webdevtrick.com</title> <link rel="stylesheet" href="./style.css"> </head> <body> <h1 class="main-title">Image Overlay Hover Effects</h1> <div class="container"> <h3 class="title">Text fadeIn bottom</h3> <div class="content"> <a href="#" target="_blank"> <div class="image-overlay"></div> <img class="content-image" src="https://webdevtrick.com/wp-content/uploads/sunset-background.jpg"> <div class="content-details fadeIn-bottom"> <h3 class="content-title">This is a title</h3> <p class="content-text">This is a short description</p> </div> </a> </div> </div> <div class="container"> <h3 class="title">Text fadeIn top</h3> <div class="content"> <a href="#" target="_blank"> <div class="image-overlay"></div> <img class="content-image" src="https://webdevtrick.com/wp-content/uploads/sunset-background.jpg"> <div class="content-details fadeIn-top"> <h3>This is a title</h3> <p>This is a short description</p> </div> </a> </div> </div> <div class="container"> <h3 class="title">Text fadeIn left</h3> <div class="content"> <a href="#" target="_blank"> <div class="image-overlay"></div> <img class="content-image" src="https://webdevtrick.com/wp-content/uploads/sunset-background.jpg"> <div class="content-details fadeIn-left"> <h3>This is a title</h3> <p>This is a short description</p> </div> </a> </div> </div> <div class="container"> <h3 class="title">Text fadeIn right</h3> <div class="content"> <a href="#" target="_blank"> <div class="image-overlay"></div> <img class="content-image" src="https://webdevtrick.com/wp-content/uploads/sunset-background.jpg"> <div class="content-details fadeIn-right"> <h3>This is a title</h3> <p>This is a short description</p> </div> </a> </div> </div> <div class="container"> <h3 class="title">Text fadeIn top left</h3> <div class="content"> <a href="#" target="_blank"> <div class="image-overlay"></div> <img class="content-image" src="https://webdevtrick.com/wp-content/uploads/sunset-background.jpg"> <div class="content-details fadeIn-top fadeIn-left"> <h3>This is a title</h3> <p>This is a short description</p> </div> </a> </div> </div> <div class="container"> <h3 class="title">Text fadeIn top right</h3> <div class="content"> <a href="#" target="_blank"> <div class="image-overlay"></div> <img class="content-image" src="https://webdevtrick.com/wp-content/uploads/sunset-background.jpg"> <div class="content-details fadeIn-top fadeIn-right"> <h3>This is a title</h3> <p>This is a short description</p> </div> </a> </div> </div> <div class="container"> <h3 class="title">Text fadeIn bottom left</h3> <div class="content"> <a href="#" target="_blank"> <div class="image-overlay"></div> <img class="content-image" src="https://webdevtrick.com/wp-content/uploads/sunset-background.jpg"> <div class="content-details fadeIn-bottom fadeIn-left"> <h3>This is a title</h3> <p>This is a short description</p> </div> </a> </div> </div> <div class="container"> <h3 class="title">Text fadeIn bottom right</h3> <div class="content"> <a href="#" target="_blank"> <div class="image-overlay"></div> <img class="content-image" src="https://webdevtrick.com/wp-content/uploads/sunset-background.jpg"> <div class="content-details fadeIn-bottom fadeIn-right"> <h3>This is a title</h3> <p>This is a short description</p> </div> </a> </div> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url(https://fonts.googleapis.com/css?family=Raleway); *, *:before, *:after{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing: border-box; } body{ background: #f9f9f9; font-size: 16px; font-family: 'Raleway', sans-serif; } .main-title{ color: #2d2d2d; text-align: center; padding: 0.7em 0; } .container{ padding: 1em 0; float: left; width: 50%; } .container .title{ color: #1a1a1a; text-align: center; margin-bottom: 10px; } .content { position: relative; width: 90%; max-width: 400px; margin: auto; overflow: hidden; } .content .image-overlay { background: rgba(0,0,0,0.7); position: absolute; height: 99%; width: 100%; left: 0; top: 0; bottom: 0; right: 0; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .content:hover .image-overlay{ opacity: 1; } .content-image{ width: 100%; } .content-details { position: absolute; text-align: center; padding-left: 1em; padding-right: 1em; width: 100%; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .content:hover .content-details{ top: 50%; left: 50%; opacity: 1; } .content-details h3{ color: #fff; font-weight: 500; letter-spacing: 0.15em; margin-bottom: 0.5em; text-transform: uppercase; } .content-details p{ color: #fff; font-size: 0.8em; } .fadeIn-bottom{ top: 80%; } .fadeIn-top{ top: 20%; } .fadeIn-left{ left: 20%; } .fadeIn-right{ left: 80%; } @media screen and (max-width: 640px){ .container{ display: block; width: 100%; } } @media screen and (min-width: 900px){ .container{ width: 33.33333%; } } |
That’s It. Now you have successfully created CSS Image Overlay Effects On Hover, 8 Different Direction Overlay. If you have any doubt or question then comment down below.
Thanks For Visiting, Keep Visiting.
