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.

Output

Create Image Hover Overlay Effect Transparent Using CSS

Developer of the Company.

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.

Output

Create Image Hover Overlay Effect Transparent Using CSS

Manager of the Company.

Create Image Hover Overlay Effect Transparent Using CSS

HR of the Company.

Create Image Hover Overlay Effect Transparent Using CSS

Designer of the Company.

Create Image Hover Overlay Effect Transparent Using CSS

Developer of the Company.

Create Image Hover Overlay Effect Transparent Using CSS

Developer of the Company.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.