Cara membuat animasi background image dengan efek zoom
Hallo teman-teman, salam jumpa kembali…
Di artikel kali ini penulis ingin membahas panduan Cara merancang animasi background image dengan efek zoom. Seketika aja ya kita bahas cara pembuatannya…
Cara merancang animasi background image dengan efek zoom Pertama-tama teman-teman siapkan sebuah gambar dengan ukuran gambar bebas, tapi penulis sarankan agar menyiapkan gambar dengan ukuran besar. Karena nanti-nya gambar ini akan kita gunakan selaku background, atau latar belakang dari tampilan blog. Selaku contoh gambar yang penulis gunakan di bawah ini :
Gambar dengan ukuran 800px X 500px
Cara merancang animasi background image dengan efek zoom Seandainya gambar telah di persipakan, berikutnya kita akan merancang file HTML nya.
Berikut di bawah ini akan kita bahas….
Teman-teman dapat copy kodingan dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>bg-image-zoom</title>
</head>
<body>
<div class=container>
<div class=content>
<img src=bg.jpg>
</div>
</div>
</body>
</html>
Berikutnya bagi CSS-nya, silahkan teman-teman copy kodingan di bawah ini :
* {padding: 0; margin: 0;}
.container {
width: 100%;
height: 605px;
margin: auto;
background: url(bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 0px 0px;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all 1s;
text-align: center;
}
.container:hover {
background-size: 100% 605px;
}
.content img {
margin-top: 40px;
}Cara merancang animasi background image dengan efek zoom Bagi kodingan CSS-nya teman-teman dapat taruh di bawah tag <title>, atau teman-teman bikin file baru dengan format (nama-file.css) . Dan jangan lupa pun bagi menaruh seluruh file gambar atau file kodingan di atas di pada 1 folder, karena kita menggunakan propertis css pemanggilan gambar :
background: url(bg.jpg);
Cara merancang animasi background image dengan efek zoom Di kodingan di atas pun ada properties yang berfungsi mengatur letak posisi background, yang dapat teman-teman ganti posisi mau di atas (top), di tengah (center), atau di bawah (bottom).
background-position: center;
Cara merancang animasi background image dengan efek zoom Dan ada pun properties yang berfungsi bagi mengatur ukuran background, yang dapat teman-teman sesuaikan sendiri bagi ukurannya. Seandainya ukurannya 0px karenanya background tak ditampilkan, melainkan tak terlihat atau seperti di sembunyikan.
background-size: 0px 0px;
Cara merancang animasi background image dengan efek zoom Nah berikutnya silahkan teman-teman buka file html yang telah di bikin tadi di browser teman-teman…
Bagi hasilnya kira-kira seperti gambar di bawah ini…
Tampilan sebelum di hover :
Tampilan setelah di hover :
Cara merancang animasi background image dengan efek zoom Lumayan sekianlah ya teman-teman bagi artikel kali ini, semoga bermanfaat ^_^
Sumber https://kursuswebsite.org
