Last Updated on February 13, 2021 by Roshan Parihar
In this tutorial, learn how to create image hover overlay effect transparent using CSS. The short answer is: use the CSS property position and z-index to add an overlay to the image on hover.
You can find out the method to overlay div element on single or multiple images to display on mouse hover with the examples given below.
How to Create Image Hover Overlay Effect Transparent Using CSS
The below example contains the image and overlay div content to overlay over the image. You need to use the position propery with values position:relative for the image and the position:absolute for the overlay div text content.
You also have to use z-index:1 for the image and z-index:2 to overlay the div element over an image as given below:
|
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 |
<style> .main-box{ width:136px; position:relative; } .main-box img{ position:relative; z-index:1; } .overlay p{ text-align: center; margin-top: 35%; } .overlay{ position: absolute; z-index: 2; top: 0; opacity: 0; color: #fff; width: 100%; height: 100%; transition: .5s ease; background-color: #2cbdec; } .main-box:hover .overlay{ opacity:0.8; } </style> <div class="main-box"> <img src="/images/user1.jpg" alt="Create Image Hover Overlay Effect Transparent Using CSS" class="img-responsive"> <div class="overlay"> <p>Developer of the Company.</p> </div> </div> |
Output
When you hover over the image given above, it displays the overlay div content. You can change the image and the div content as per your requirements.
Create with Multiple Images Using CSS
Similarly, as you have created the overlay effect in the above example, you can also create an overlay effect for the multiple images with div content as given below:
|
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 |
<style> .main-box{ width: 136px; position: relative; float: left; margin: 0 4px; } .main-box img{ position:relative; z-index:1; border: 1px solid #ccc; } .overlay p{ text-align: center; margin-top: 35%; } .overlay{ position: absolute; z-index: 2; top: 0; opacity: 0; color: #fff; width: 100%; height: 100%; transition: .5s ease; background-color: #2cbdec; } .main-box:hover .overlay{ opacity:0.8; } </style> <div class="main-box"> <img src="/images/user1.jpg" alt="Create Image Hover Overlay Effect Transparent Using CSS" class="img-responsive"> <div class="overlay"> <p>Manager of the Company.</p> </div> </div> <div class="main-box"> <img src="/images/user2.jpg" alt="Create Image Hover Overlay Effect Transparent Using CSS" class="img-responsive"> <div class="overlay"> <p>HR of the Company.</p> </div> </div> <div class="main-box"> <img src="/images/user3.jpg" alt="Create Image Hover Overlay Effect Transparent Using CSS" class="img-responsive"> <div class="overlay"> <p>Designer of the Company.</p> </div> </div> <div class="main-box"> <img src="/images/user4.jpg" alt="Create Image Hover Overlay Effect Transparent Using CSS" class="img-responsive"> <div class="overlay"> <p>Developer of the Company.</p> </div> </div> <div class="main-box"> <img src="/images/user4.jpg" alt="Create Image Hover Overlay Effect Transparent Using CSS" class="img-responsive"> <div class="overlay"> <p>Developer of the Company.</p> </div> </div> |
Output
You can use this on your website to show your team members. This is a beautiful way of displaying images and their details on hover. However, if you want to show your team members in a different way, you may also like to change an image on hover using CSS and jQuery.
You can use this to show your company team members images. If the company visitors want to know about the team members, they have to mouse hover over the team member images. This is a beautiful way of showing the details of the team members. It also saves some space on your website page to include the details of team members.
You May Also Like to Read