This css effect is commonly used hover effect. Reduce the opacity of the image on hover the particular image this will done by using the simple css code. opacity: .5; You may reduce the opacity .4,.6 like that according to your choice. Below example have the sample codes and demos please check it was very useful for beginners
Code for Reduce the Opacity on hover the image:
<html>
<head>
<title>opacity Hover effect with caption using css3</title>
<style>
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
.column div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
.hover11 figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover11 figure:hover img {
opacity: .5;
}
</style>
</head>
<body>
<div class="hover11 column">
<div>
<figure><img src="1.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="2.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="3.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="4.jpeg" /></figure>
<span>Hover Text</span>
</div>
</div>
</body>
</html>
<head>
<title>opacity Hover effect with caption using css3</title>
<style>
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
.column div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
.hover11 figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover11 figure:hover img {
opacity: .5;
}
</style>
</head>
<body>
<div class="hover11 column">
<div>
<figure><img src="1.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="2.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="3.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="4.jpeg" /></figure>
<span>Hover Text</span>
</div>
</div>
</body>
</html>
0 Comments