In this tutorial, learn how to create image hover overlay effect transparent using CSS. Overlay div element on single or multiple images and view div content only on mouse hover.
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 the beautiful way of showing the details of the team members. It also saves some space of your website page to include the details of team members. You also like how to center align images inside div using CSS.
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 of CSS to overlay them. The image should be position:relative and the overlay text should be position:absolute.
If you want to take the div content over the image, you also have to put z-index:1 for the image and z-index:2 for the div overlay element. Check the below example to get the use of each CSS applied.
|
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
Hover over the image given above to see the overlay div content. You can change the image and the div content as per your requirement. You can also add as many images as your want and include the multiple image with overlay on hover.
Create Multiple Image Hover Overlay Effect Transparent Using CSS
The below example contains the multiple images with multiple div content for these image. Hover over each images to get the different div overlay content on hover.
|
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 to your website to show your team members. This is the beautiful way of displaying image and its details on hover. However, if you want to show your team members in different way, you may also like to change image on hover using CSS and jQuery.
THE ULTIMATE TOOLKIT
Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.
Get the PDF