Labels

CSS Dropdown Menu (Dropdown Image)

We will use CSS styles to create a Dropdown menu with Image. It shows an enlarged image, when mouse comes over it.

Dropdown Image Menu

This example use CSS Styles to show the enlarge image in dropdown menu when the mouse comes over it.

Dropdown Image

Move the mouse over the image below to open the dropdown content.

Forest
Forest
Forest

Example

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}

.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown content.</p>

<div class="dropdown">
<img src="img_forest.jpg" alt="Forest" width="100" height="50">
<div class="dropdown-content">
<img src="img_forest.jpg" alt="Forest" width="300" height="200">
<div class="desc">Forest</div>
</div>
</div>

</body>
</html>

Example Explained

  • .dropdown {
    position: relative;
    display: inline-block;
    }     - position: relative is used to position the Dropdown menu.
  • .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    }     - The Dropdown menu with image. It is hidden by default with display: none;. The position: absolute; position the Dropdown menu just below the small image.
  • .dropdown:hover .dropdown-content {
    display: block;
    }     - It shows the Dropdown menu on hover.
  • <div class="dropdown">
    <img src="img_forest.jpg" alt="Forest" width="100" height="50">
    <div class="dropdown-content">
    <img src="img_forest.jpg" alt="Cinque Terre" width="300" height="200">
    <div class="desc">Forest</div>
    </div>
    </div>     - This is the Dropdown box. The Dropdown image is contained inside the dropdown <div> element.

Tags

Comments

Post a Comment