Clip-path merupakan salah satu property css yang digunakan untuk memotong bagian yang terlihat dari elemen SVG, gambar atau elemen HTML apa pun, kita dapat memamfaatkan property ini untuk membuat berbagai macam animasi. Pada kesempatan kali ini saya akan berbagi tips bagaimana cara membuat animasi menggunakan clip-path css.
1. Pertama, buka text editor teman-teman, lalu buat file html baru dan tulis code berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Animasi Clip-path</title>
</head>
<body>
<div class="box">
<div class="content">
<div class="content-body">
<h2>Bunga Mawar</h2>
<p>Mawar adalah suatu jenis tanaman semak dari genus Rosa sekaligus nama bunga yang dihasilkan tanaman ini.
Mawar liar terdiri dari 100 spesies lebih, kebanyakan tumbuh di belahan bumi utara yang berudara sejuk.
Spesies mawar umumnya merupakan tanaman semak yang berduri atau tanaman memanjat yang tingginya bisa mencapai
2 sampai 5 meter. Walaupun jarang ditemui, tinggi tanaman mawar yang merambat di tanaman lain bisa mencapai 20 meter.</p>
<a href="#">Read More</a>
</div>
</div>
<img src="./rose.jpg" alt="">
</div>
</body>
</html>
2. Selanjutnya, buat file cssnya seperti dibawah ini:
body{
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.box{
width: 400px;
height: 400px;
border-radius: 5px;
position: relative;
background-color: #000;
}
.content{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: grid;
align-items: center;
padding: 20px;
font-family: consolas;
text-align: center;
color: #fff;
}
.content a{
display: inline-block;
margin-top: 10px;
padding: 10px 15px;
border: 1px solid #fff;
text-decoration: none;
color: #fff;
transition: .5s;
}
.content a:hover{
background-color: #fff;
color: #000;
}
.box img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
object-fit: cover;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: 1s;
}
.box:hover img{
clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);
}
Sedikit penjelasan tentang code html dan css diatas, jadi disini kita membuat sebuah card yang yang didalamnya terdapat gambar dan deskripsi gambar yang saling bertumpuk, dan pada saat gambar di hover, akan memunculkan deskripsi dari gambar tersebut dan akan muncul animasi saat gambar menghilang.
Setelah menulis semua code diatas, simpan lalu buka file htmlnya di browser.
Selamat mencoba.
Sulfikardi
Web Design & Web Programming
Halo, saya seorang Web Developer yang terbiasa mengembangkan website
menggunakan HTML, CSS, Javascript, PHP, MYSQL, dan Laravel. Disini saya akan membagikan pengalaman saya dalam membangun dan mengembangan website yang responsif dan dinamis
05 Nov 2020
Sulfikardi
227
Web Programming
