create image hover effect using HTML and CSS | Image hover animation
Slidely Tiltle Image Hover Effect using HTML & CSS3
Note-: Change Image path or name with your file path.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="4000">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image hover effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<figure class="snip1104 red">
<img src="img1.jpg"/>
<figcaption>
<h2>Jean <span> Myers</span></h2>
</figcaption>
<a href="#"></a>
</figure>
<figure class="snip1104 blue"><img src="img2.jpg"/>
<figcaption>
<h2>Lynn <span> Reyes</span></h2>
</figcaption>
<a href="#"></a>
</figure>
</body>
</html>
CSS Code(style.css)
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
html {
height: 100%;
}
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
margin: 0;
background-color:whitesmoke;
}
figure.snip1104 {
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.snip1104 * {
box-sizing: border-box;
transition: all 0.4s ease-in-out;
}
figure.snip1104 img {
max-width: 100%;
position: relative;
opacity: 0.4;
}
figure.snip1104 figcaption {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
figure.snip1104 h2 {
position: absolute;
left: 40px;
right: 40px;
display: inline-block;
background: #000000;
transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
padding: 12px 5px;
margin: 0;
top: 50%;
text-transform: uppercase;
font-weight: 400;
}
figure.snip1104 h2 span {
font-weight: 800;
}
figure.snip1104:before {
height: 100%;
width: 100%;
top: 0;
left: 0;
content: '';
background: #ffffff;
position: absolute;
transition: all 0.3s ease-in-out;
transform: rotate(110deg) translateY(-50%);
}
figure.snip1104 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
figure.snip1104.blue {
background: #123851;
}
figure.snip1104.blue h2 {
background: #0a212f;
}
figure.snip1104.red {
background: #581a14;
}
figure.snip1104.red h2 {
background: #36100c;
}
figure.snip1104:hover img{
opacity: 1;
transform: scale(1.1);
}
figure.snip1104:hover h2{
transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}
figure.snip1104:hover:before{
transform: rotate(110deg) translateY(-150%);
}
Comments
Post a Comment