In this article we will learn how to create an image overlay title when the mouse has hovered over it, using HTML and CSS. This can be done by including the image and title div in a single div (container). The title div is initially invisible. It becomes visible only when the mouse has hovered over the image.
The title div is positioned relative to the container div (parent). It is made invisible by setting either the “opacity: 0” or “z-index: -1” (z-index : -1 implies that title div layer is now at the back of container div and hence invisible). It becomes visible only on hover by setting its “opacity: 1” or “z-index: 0 “ respectively as shown in the following examples.
Example 1: Here, opacity of the title div is initially 0 and changes to 1 on hover with a transition of 0.6 seconds.
Example 2: Here, z-index of the title div is initially -1 which means it is at the back of container div. It changes to 0 on hover with a transition of 0.8 seconds as shown below:
- How to Create Image Overlay Hover using HTML & CSS ?
- CSS | Combine background image with gradient overlay
- How to Create an Image Overlay Icon using HTML and CSS ?
- How to overlay one div over another div using CSS
- How to make a glass/blur effect overlay using HTML and CSS ?
- CSS | Animation to Change the Hover State of a Button/Image
- How to Zoom an Image on Mouse Hover using CSS ?
- How to flip an image on hover using CSS ?
- How to use links on card-img-overlay class in Bootstrap 4 ?
- Convert an image into grayscale image using HTML/CSS
- How to add a black hover to an image using bootstrap?
- How to write a:hover in inline CSS?
- CSS | :hover Selector
- How to write :hover condition for a:before and a:after in CSS?
- How to disable a CSS :hover effect?
- How to Shift Inline Elements When Text Bold on Hover using CSS ?
- How to zoom an element on Hover using CSS ?
- How to create Skewed Background with hover effect using HTML and CSS?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.