 |
CSS Image Hover Effects & Navigation Menu: Complete Tutorial with Full Code
CSS Image
Opacity
The opacity property
specifies the opacity/transparency of an element.
The opacity property can take a value from 0.0 -
1.0:
- 0.0 -
The element will be completely transparent
- 0.5 -
The element will be 50% transparent
- 1.0 -
Default. The element will be fully opaque
Full Code is bel
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<h2>The opacity Property</h2>
<p>The opacity property specifies the opacity of an
element. The lower the value, the more transparent:</p>
<p>Image with 50% opacity:</p>
<img src="img_forest.jpg"
alt="Forest" width="170" height="100">
</body>
</html>
Opacity and :hover
The opacity property is often used
with :hover to change the opacity on mouse-over:
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h2>Opacity and :hover</h2>
<p>Opacity is often used with :hover to change the
opacity on mouse-over:</p>
<img src="img_forest.jpg"
alt="Forest" width="170" height="100">
<img src="img_mountains.jpg"
alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy"
width="170" height="100">
</body>
</html>
CSS Image Hover Effects & Navigation Menu: Complete Tutorial with Full Code
Complete Opacity and hover
example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h2>Opacity and :hover</h2>
<p>Opacity is often used with :hover to change the
opacity on mouse-over:</p>
<img src="img_forest.jpg"
alt="Forest" width="170" height="100">
<img src="img_mountains.jpg"
alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy"
width="170" height="100">
</body>
</html>
=============
CSS Image Hover Effects & Navigation Menu: Complete Tutorial with Full Code
When you run this code you will see that three images are
shown, if you hover on any one image shows the hover with opacity .
CSS Navigation Bars
A navigation bar is an important component of web design.
Navigation bars helps users to easily navigate between
different sections of a website.
Navigation bars are typically built with HTML list elements
( <ul> and <li>), and then styled with CSS to get a great look.
A navigation bar is typically located at the top or at the
side of a webpage.
Example
<ul>
<li><a
href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a
href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
You can set the navigation bar vertical or Horizontal as you
wish.
The full code of Horizontal Navigations is as below:
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML code for Navbar</h2>
<ul>
<li><a
href="#home">Home</a></li>
<li><a
href="#news">News</a></li>
<li><a
href="#contact">Contact</a></li>
<li><a
href="#about">About</a></li>
</ul>
<p>Note: We use href="#" for links. In a
real website this would be URLs.</p>
</body>
</html>
=============
CSS Vertical Navbar Example
Here, we create a basic vertical navigation bar with a gray
background color, and we also change the background color and the text color of
the links when the user mouse over them:
- Home
- News
- Contact
- About
·
Example
·
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: black;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link and background
color on hover */
li a:hover {
background-color: #555555;
color: white;
}
----------------------------
CSS Image Hover Effects & Navigation Menu: Complete Tutorial with Full Code
Complete Code is below:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type:
none;
margin: 0;
padding: 0;
width: 200px;
background-color:
#f1f1f1;
border: 1px solid
#555555;
}
li a {
display: block;
color: black;
padding: 8px 16px;
text-decoration:
none;
}
li {
text-align: center;
border-bottom: 1px
solid #555555;
}
li:last-child {
border-bottom: none;
}
li a.active {
background-color:
#04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color:
#555555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navbar with Border and Centered
Text</h2>
<p>In this example, we center the navigation links and
add a border to the navigation bar.</p>
<ul>
<li><a
class="active" href="#home">Home</a></li>
<li><a
href="#news">News</a></li>
<li><a
href="#contact">Contact</a></li>
<li><a
href="#about">About</a></li>
</ul>
</body>
</html>
==================