CSS gradients show a smooth transition between two or more colors. It is defined in two ways: Linear Gradients and Radial Gradients.
Linear Gradients from left to right with red to yellow color
Click the above link to learn more in detail about Linear Gradients and Radial Gradients.
Donate to support the writer
You may be interested in the following topics:
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.
<!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>
Move the cursor over the below image to see dropdown.
Donate to support writers
You may be interested in the following topics:
CSS Navigation dropdown menu enhances your website and makes it professional looks by organizing the sub-categories items under the main categories.
See an example below of CSS Navigation Dropdown Menu source code and output.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body{
height: 400px;
}
.navigation_menu_item {
overflow: hidden;
/*dark blue background color*/
background-color: #00008b;
}
.navigation_menu_item a {
float: left;
padding: 10px 20px;
font-size: 20px;
color: white; /*font color white*/
text-decoration: none;
text-align: center;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbutton {
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 10px 20px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navigation_menu_item a:hover, .dropdown:hover .dropbutton {
background-color: #e0ffff;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e6e6fa;
min-width: 30%;
z-index: 1;
}
.dropdown-content a {
display: block;
float: none;
color: black;
padding: 10px 20px;
font-size: 18px;
text-decoration: none;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
background-color: #87cefa;
}
</style>
</head>
<body>
<div class="navigation_menu_item">
<a href="#home">Home</a>
<a href="#about_us">About Us</a>
<div class="dropdown">
<button class="dropbutton">Shop
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Accessories</a>
<a href="#">Shoes</a>
<a href="#">Clothing</a>
<a href="#">Bags</a>
</div>
</div>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>
Donate to support writers
You may be interested in the following topics:
CSS text hover dropdown appears when you put your mouse cursor over the text and a dropdown item will be shown. See a source code to achieve this function using CSS code.
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown_item {
display: none;
position: absolute;
background-color: lightgray;
min-width: 100%;
}
.dropdown_item a {
display: block;
color: black;
padding: 10px;
text-decoration: none;
border-bottom:1px solid white;
}
.dropdown:hover .dropdown_item {
display: block;
}
.dropdown_item a:hover {
background-color: #f8f8ff
}
</style>
</head>
<body>
<h3>Text Hover Dropdown</h3>
<p>Put your mouse cursor over the text below to open dropdown items.</p>
<div class="dropdown">
<span>Bring cursor over me</span>
<div class="dropdown_item">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>
Donate to support writers
You may be interested in the following topics:
CSS dropdown menu is used when you want to show sub-categories on the mouse over the main categories. You can show dropdown items over the simple text, navigation bar, and images.
Click Here, to understand how to use text hover dropdown using CSS.
Click Here, to learn more in detail about how you make your navigation menu as a dropdown menu.
Click Here, to see how you achieve the above image hover navigation content.
You may be interested in the following topics: