<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>effectHover</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="images">
<figure>
<div class="hoverProduct">
<a href="#" ><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></a>
</div>
<figcaption>
<a href="#"><h3>Spray Packs</h3></a></figcaption>
</figure> </div>
<div class="hover12 column">
<div>
<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure>
</div>
<div>
<div class="images">
<figure>
<a href="#"><img src="css/images/SprayPacks.jpg" alt="Lorem pixel" /></a>
<figcaption><a href="#"><h3></h3></a></figcaption>
</figure>
</div>
<p>I am text.</p>
<h2 id="demo12">12. Opacity #2</h2>
<div class="hover12 column">
<div>
<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure>
</div>
<div>
<figure style="background-color:orange;"><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure>
</div>
<div>
<figure style="background-color:#3498db;"><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure>
<span>Hover</span>
</div>
</div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/Ferencok/effecthover-PNroxY */
images{
float:left;
}/*
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
/* Opacity #2 *//*
.hover12 figure {
background: red;
}
.hover12 figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover12 figure:hover img {
opacity: .8;
}*/
.hoverProduct{
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
display:block;
border: 1px solid black;
}
.hoverProduct a {
position: relative ;
float: left;
margin: 0 0 0 0;
padding: 0;
height: auto;
}
/* Opacity #2 */
.images .hoverProduct img {
opacity: 1;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
.images .hoverProduct a img:hover {
opacity: 0.5;
background:rgba(0,0,0, 0.5);
}
figcaption{
margin: ;
width: 10%;
}
h3{
padding: 7%;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
