Coding HTML
<!DOCTYPE html>
<html>
<head>
<title>Awesome Efek Hover</title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="card middle">
<div class="front">
<img src="1-cloudscape-canvas-pixabay.jpg">
</div>
<div class="back">
<div class="back-content middle">
<h2>Blogger</h2>
<span>Youtube</span>
<div class="sm">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
</div>
</body>
</html>
Coding CSS
@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
* {
margin: 0;
padding: 0;
text-decoration: none;
font-family: sans-serif;
}
body {
background: #2f3640;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.card {
cursor: pointer;
width: 340px;
height: 480px;
}
.front, .back {
width: 100%;
height: 100%;
overflow: hidden;
backface-visibility: hidden;
position: absolute;
transition: transform 0.6s linear;
}
.front img {
height: 100%;
}
.front {
transform: perspective(600px) rotateY(0deg);
}
.back {
background: #f1f1f1;
transform: perspective(600px) rotateY(180deg);
}
.back-content {
color: #2c3e50;
text-align: center;
width: 100%;
}
.sm {
margin: 20px 0;
}
.sm a {
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
color: #2c3e50;
font-size: 18px;
transition: 0.4s;
border-radius: 50px;
}
.sm a:hover {
background: #2c3e50;
color: white;
}
.card:hover > .front {
transform: perspective(600px) rotateY(-180deg);
}
.card:hover > .back {
transform: perspective(600px) rotateY(0deg);
}
Hasil
Before:
After:
Tidak ada komentar:
Posting Komentar