Definition:
You can also show a dropdown on the image hover. When you put your mouse over an image, it shows an image and other contents.
Let’s see it with an example.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
body{
height: 350px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-item {
display: none;
position: absolute;
background-color: darkred;
min-width: 200px;
z-index: 1;
}
.dropdown:hover .dropdown-item {
display: block;
}
.caption {
padding: 15px;
text-align: center;
text-decoration: underline;
color:white;
}
</style>
</head>
<body>
<h2>Image Hover Dropdown</h2>
<p>Move the cursor over the below image to see dropdown.</p>
<div class="dropdown">
<img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/Geeta.jpg" alt="Beautiful Asian Girl" width="100" height="75">
<div class="dropdown-item">
<img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/Geeta.jpg" alt="Beautiful Asian Girl" width="400" height="300">
<div class="caption">Beautiful Asian Girl</div>
</div>
</div>
</body>
</html>
Output:
Image Hover Dropdown
Move the cursor over the below image to see dropdown.
Beautiful Asian Girl
Donate to support writers
You may be interested in the following topics: