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 Show Font On Hovering the Mouse Over Image?
The task we are going to perform in this article is about how to show font on hovering the mouse over image. This technique is commonly used to display additional information, captions, or descriptions when users interact with images on a webpage.
The onmouseover event in HTML is triggered when the mouse pointer touches an element. When the mouse pointer departs an element, an event called onmouseout takes place. In CSS, the :hover pseudo-class is used to apply styles when a user hovers their cursor over an element.
Syntax
Following is the syntax for the :hover pseudo-class
:hover {
/* CSS properties */
}
For targeting specific elements on hover
element:hover {
/* CSS properties applied on hover */
}
Method 1 Text Overlay at Bottom Corner
In this method, we create a text overlay that appears at the bottom corner of the image when hovered. The text is initially hidden using visibility: hidden and becomes visible on hover.
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Overlay on Image Hover</title>
<style>
.img {
position: relative;
width: 200px;
height: 200px;
float: left;
margin-right: 10px;
overflow: hidden;
}
.img div {
position: absolute;
bottom: 0;
right: 0;
background: black;
color: white;
margin-bottom: 5px;
visibility: hidden;
transition: all 0.3s ease;
}
.img:hover {
cursor: pointer;
}
.img:hover div {
width: 150px;
padding: 8px 15px;
visibility: visible;
opacity: 0.8;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<div class="img">
<img src="/html/images/test.png" width="100%" height="100%" alt="HTML Logo">
<div>HTML Tutorial</div>
</div>
<div class="img">
<img src="/css/images/css-mini-logo.jpg" width="100%" height="100%" alt="CSS Logo">
<div>CSS Tutorial</div>
</div>
</body>
</html>
The output displays two images side by side. When hovering over each image, a text caption appears at the bottom-right corner with a semi-transparent black background
[Image 1] [Image 2] (On hover: "HTML Tutorial" and "CSS Tutorial" appear in bottom corner)
Method 2 Full Image Text Overlay
This method creates a text overlay that covers the entire image with a background color and smooth transition effects.
Example
<!DOCTYPE html>
<html>
<head>
<title>Full Image Text Overlay</title>
<style>
.tutorial {
position: relative;
max-width: 300px;
margin: 10px;
}
.tutorial img {
width: 100%;
height: 200px;
object-fit: cover;
}
.fulltext {
box-sizing: border-box;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: rgba(42, 128, 185, 0.9);
color: white;
font-size: 18px;
font-weight: bold;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
}
.tutorial:hover .fulltext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<div class="tutorial">
<img src="/java/images/java-mini-logo.jpg" alt="Java Tutorial">
<div class="fulltext">
LEARN JAVA!<br>
Complete Programming Guide
</div>
</div>
</body>
</html>
On hover, the text overlay covers the entire image with a blue background and centered text
[Java Tutorial Image] (On hover: Blue overlay with "LEARN JAVA! Complete Programming Guide")
Method 3 Fade Effect with Image Transparency
This approach uses image opacity changes to reveal text underneath when hovering over the image.
Example
<!DOCTYPE html>
<html>
<head>
<title>Image Fade with Text Reveal</title>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
text-align: center;
margin: 20px auto;
}
.container img {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
object-fit: cover;
transition: opacity 0.5s ease;
}
.container:hover img {
opacity: 0.2;
}
.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
font-weight: bold;
color: #333;
margin: 0;
z-index: 1;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<div class="container">
<img src="/static/images/logo-color.png" alt="TutorialsPoint Logo">
<p>Welcome to<br>TutorialsPoint</p>
</div>
</body>
</html>
The output shows a circular image that becomes semi-transparent on hover, revealing the text underneath
[Circular TutorialsPoint Logo Image] (On hover: Image fades and "Welcome to TutorialsPoint" text becomes visible)
How It Works
All three methods rely on CSS positioning and the :hover pseudo-class. The key techniques used are
Positioning Using
position: relativeon containers andposition: absoluteon text overlaysVisibility Control Using
visibility: hidden/visibleoropacity: 0/1to show/hide textTransitions Adding smooth animations with
transitionpropertyHover Effects Triggering changes using the
:hoverpseudo-class
Comparison of Methods
| Method | Text Position | Image Visibility | Best Use Case |
|---|---|---|---|
| Bottom Corner Overlay | Bottom-right corner | Fully visible | Image galleries, thumbnails |
| Full Image Overlay | Center of image | Hidden behind overlay | Portfolio items, featured content |
| Fade Effect | Center with transparent image | Semi-transparent | Logo reveals, artistic effects |
Conclusion
Showing text on image hover enhances user experience by providing additional information without cluttering the interface. The three methods presented offer different visual effects corner overlays for subtle information, full overlays for detailed descriptions, and fade effects for artistic presentations. Choose the method that best fits your design requirements and user interaction goals.
1K+ Views
