Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create Image Hovered Detail using HTML & CSS?
Creating image hover effects with detailed text overlays adds interactivity and visual appeal to your website. By combining HTML structure with CSS styling, you can create engaging hover animations that reveal additional information when users move their cursor over images.
Syntax
selector:hover {
property: value;
}
The :hover Selector
The CSS :hover selector is used to select and style an element when the user hovers their mouse over it. It works in combination with other selectors to target specific HTML elements and apply styles when the cursor is positioned over them.
Approach
To create an image hover effect with detailed text overlay, we follow these steps
Create a container Use a div element with relative positioning to hold both the image and text overlay.
Add the image Insert an img element that fills the container completely.
Add the text overlay Create another div with absolute positioning for the descriptive text.
Style the overlay Apply background color, text styling, and flexbox properties for proper alignment.
Implement hover effect Use the
:hoverselector to show/hide the text overlay.Add smooth transitions Include CSS transitions for smooth animation effects.
Example
The following example demonstrates how to create an image hover effect with a text overlay that appears on hover ?
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.container:hover img {
transform: scale(1.1);
}
.text-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
text-align: center;
padding: 20px;
}
.container:hover .text-overlay {
opacity: 1;
}
.text-overlay h3 {
margin: 0 0 10px 0;
font-size: 1.5rem;
}
.text-overlay p {
margin: 0;
font-size: 1rem;
line-height: 1.4;
}
</style>
</head>
<body>
<div class="container">
<img src="https://picsum.photos/300/200" alt="Sample Image">
<div class="text-overlay">
<h3>Nature Photography</h3>
<p>Discover the beauty of nature through stunning landscape photography.</p>
</div>
</div>
</body>
</html>
An image appears with rounded corners. When you hover over it, a dark semi-transparent overlay slides in with white text showing "Nature Photography" as the title and a description below. The image also scales up slightly (1.1x) during the hover effect.
Key Properties Used
| Property | Purpose |
|---|---|
position: relative |
Creates positioning context for absolute children |
position: absolute |
Positions overlay on top of image |
opacity |
Controls visibility of the text overlay |
transform: scale() |
Creates zoom effect on image hover |
transition |
Provides smooth animation between states |
Conclusion
Image hover effects with detailed text overlays are an excellent way to add interactivity to your website. Using the :hover selector combined with opacity and transform properties, you can create smooth, professional-looking animations that enhance user engagement and provide additional context for your images.
1K+ Views
