Image hover 01
<!DOCTYPE html>
<html>
<head>
<title>Image hover | par NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="Image hover effects style">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<meta name="robots" content="noindex,nofollow">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body >
<div class="main">
<h1>The coolest image hover effect</h1>
<div class="flex">
<figure class="photo red">
<img src="https://source.unsplash.com/random/" />
<figcaption>
<h2>Ex <span> Image</span></h2>
</figcaption>
<a href="#"></a>
</figure>
<figure class="photo blue">
<img src="https://source.unsplash.com/random/"/>
<figcaption>
<h2>Ex <span> Image</span></h2>
</figcaption>
<a href="#"></a>
</figure>
<figure class="photo"><img src="https://source.unsplash.com/random/" />
<figcaption>
<h2>Ex <span> Image</span></h2>
</figcaption>
<a href="#"></a>
</figure>
</div>
</div>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
.main {
margin-top: 20px;
margin-bottom: 20px;
}
.main h1{text-align: center;}
figure.photo {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
max-height: 220px;
width: 100%;
background: #000000;
color: #ffffff;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.photo * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
figure.photo img {
max-width: 100%;
position: relative;
opacity: 0.4;
display: block;
}
figure.photo figcaption {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
figure.photo h2 {
position: absolute;
left: 40px;
right: 40px;
display: inline-block;
background: #000000;
-webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
padding: 12px 5px;
margin: 0;
top: 50%;
text-transform: uppercase;
font-weight: 400;
}
figure.photo h2 span {
font-weight: 800;
}
figure.photo:before {
height: 100%;
width: 100%;
top: 0;
left: 0;
content: '';
background: #ffffff;
position: absolute;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: rotate(110deg) translateY(-50%);
transform: rotate(110deg) translateY(-50%);
}
figure.photo a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
figure.photo.blue {
background: #123851;
}
figure.photo.blue h2 {
background: #0a212f;
}
figure.photo.red {
background: #581a14;
}
figure.photo.red h2 {
background: #36100c;
}
figure.photo.yellow {
background: #7f5006;
}
figure.photo.yellow h2 {
background: #583804;
}
figure.photo:hover img,
figure.photo.hover img {
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
figure.photo:hover h2,
figure.photo.hover h2 {
-webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}
figure.photo:hover:before,
figure.photo.hover:before {
-webkit-transform: rotate(110deg) translateY(-150%);
transform: rotate(110deg) translateY(-150%);
}
/* Demo purposes only */
/* html {
height: 100%;
}
body {
background-color: #212121;
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
margin: 0;
height: 100%;
} */
.flex {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}