Animasi mewah yang melibatkan melayang di atas gambar biasanya membutuhkan JavaScript. Tidak lagi! CSS hadir untuk menghidupkan thumbnail dan galeri Anda.
Efek hover gambar dapat menambahkan tingkat polesan ekstra ke situs web Anda. Mereka menciptakan efek halus, membuat galeri gambar atau komidi putar lebih menyenangkan untuk dinavigasi. Bagian terbaiknya adalah Anda dapat membuat efek ini hanya dengan CSS dan tanpa JavaScript.
Anda dapat membuat berbagai gaya animasi pada gambar Anda. Ini termasuk mengaburkan atau memperbesar latar belakang, memudarkan atau menggeser teks, dan mengubah warna latar belakang.
Membuat HTML untuk Gambar
Mulailah dengan membuat sebuah index.html file di dalam folder kosong di komputer Anda, lalu buka file tersebut dengan editor teks. Di dalam file, buat kerangka HTML dan tambahkan markup berikut di dalam tag badan pembuka dan penutup badan:
<divkelas="kisi">
<divkelas="pembungkus gambar">
<imgkelas="mengaburkan"src=" https://picsum.photos/500?random=1"alt=""><divkelas="konten memudar">
Lorem ipsum dolor sit amet consectetur adipisicing elite. Iklan solusi
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divkelas="pembungkus gambar">
<imgkelas="memperbesar buram"src=" https://picsum.photos/500?random=2"alt=""><divkelas="konten memudar">
Lorem ipsum dolor sit amet consectetur adipisicing elite. Iklan solusi
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divkelas="pembungkus gambar">
<imgkelas="mengaburkan"src=" https://picsum.photos/500?random=3"alt=""><divkelas="isi slide-kiri">
Lorem ipsum dolor sit amet consectetur adipisicing elite. Iklan solusi
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divkelas="pembungkus gambar">
<imgkelas="abu-abu"src=" https://picsum.photos/500?random=3"alt="">
<divkelas="isi slide-kiri">
Lorem ipsum dolor sit amet consectetur adipisicing elite. Iklan solusi
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>
Ini adalah wadah kisi dengan empat pembungkus gambar. Elemen div dengan image-wrapper class berfungsi sebagai pembungkus untuk gambar dan teks yang sesuai. Setiap gambar dan konten bagian memiliki sekumpulan kelas unik yang ditambahkan ke dalamnya.
Di dalam style sheet, Anda akan menargetkan elemen-elemen ini dengan nama kelas mereka dan terapkan berbagai gaya dan efek animasi. Teks tidak akan ditampilkan secara default; Anda hanya akan menampilkannya saat Anda mengarahkan kursor ke pembungkus gambar, dan gambar tersebut akan mengalami efek yang berbeda dalam prosesnya.
Menambahkan CSS Dasar
Sekarang setelah Anda membuat HTML, saatnya untuk menatanya dengan CSS. Membuat style.css file dan link ke style sheet ini dari file HTML Anda, di dalam bagian:
<tautanrel="lembar gaya"href="style.css">Di dalam Anda style.css file, hal pertama yang perlu Anda lakukan adalah mengatur ulang margin pada badan ke nol dan mengatur beberapa margin bawah:
tubuh {
batas: 0;
margin-bawah: 20rem;
}Selanjutnya, Anda perlu mengubah wadah terluar menjadi a Grid CSS yang dapat Anda gunakan untuk menata elemen dalam dua dimensi. Kode berikut membuat kisi dengan banyak kolom atau baris yang sesuai. Ukuran minimum setiap kolom adalah 300px dan ukuran maksimum adalah 1 fraksi wadah:
.kisi {
menampilkan: kisi;
grid-template-columns: mengulang(pas otomatis, minmax(300px, 1fr));
}Karena Anda ingin memposisikan teks relatif terhadap wadahnya, Anda perlu mengatur posisi relatif terhadap pembungkus gambar:
.image-wrapper {
posisi: relatif;
meluap: tersembunyi;
}
Langkah selanjutnya adalah memberi gaya pada gambar. Tampilkan gambar sebagai elemen blok, buat rentang lebar seluruh wadah, dan tempatkan pas di tengah wadahnya:
.image-wrapper > img {
menampilkan: memblokir;
lebar: 100%;
rasio aspek: 1 / 1;
sesuai objek: menutupi;
posisi objek: tengah;
}
Sedangkan untuk teks, posisikan di tengah dan beri warna latar abu-abu muda yang transparan:
.image-wrapper > .isi {
posisi: mutlak;
sisipan: 0;
ukuran huruf: 2rem;
lapisan: 1rem;
latar belakang: rgba(255, 255, 255, .4);
menampilkan: melenturkan;
menyelaraskan-item: tengah;
membenarkan-konten: tengah;
}
Simpan file CSS dan buka index.html di peramban Anda. Anda harus menemukan halaman yang mirip dengan yang ada pada gambar di bawah ini.
Mengatur Transisi pada Gambar dan Teks
Sekarang setelah Anda menerapkan gaya dasar ke gambar, langkah selanjutnya adalah menambahkan beberapa animasi ke dalamnya. Mulailah dengan menambahkan transisi ke gambar dan teks yang sesuai:
.image-wrapper > img,
.image-wrapper > .isi {
transisi: 200MSkemudahan-in-out;
}
Ini berarti bahwa semua efek transisi (yaitu fade-in, zoom, dan blur) akan berlangsung selama 200 milidetik dan memiliki kurva waktu yang sama.
Animasi Fade-In dan Blur
Gaya animasi pertama memudar dalam teks. Saat Anda mengarahkan kursor ke pembungkus gambar tertentu, konten yang memiliki memudar kelas akan menerapkan efek ini (animasi fade-in dan fade-out). Anda mencapainya dengan menyetel opasitas ke nol dan mengubahnya menjadi satu saat mouse mengarahkan kursor ke pembungkus gambar tertentu:
.image-wrapper > .isi.memudar {
kegelapan: 0;
}
.image-wrapper:arahkan > .isi.memudar {
kegelapan: 1;
}
Jika Anda menyimpan file dan memeriksa browser Anda, Anda akan melihat efek animasi fade-in. Tetapi Anda mungkin juga memperhatikan bahwa teksnya agak sulit dibaca (jika gambarnya mencolok dan memiliki banyak kontras). Ingatlah bahwa semua gambar juga memiliki nama kelas mengaburkan. Ini untuk memburamkan gambar untuk menambahkan kontras yang sangat dibutuhkan antara mereka dan teks:
image-wrapper:arahkan > img.mengaburkan {
Saring: mengaburkan(5px)
}
Sekarang ketika Anda mengarahkan kursor ke atas gambar, Anda dapat melihat bahwa itu hanya akan kabur. Anda dapat meningkatkan nilai piksel untuk membuat keburaman lebih terlihat pada gambar, sehingga menambahkan lebih banyak kontras antara piksel dan teks.
Menambahkan Efek Lain
Efek lainnya adalah menggeser teks dari kiri, memperbesar gambar, dan menambahkan skala abu-abu pada gambar. Berikut adalah kode untuk mencapai ketiga efek tersebut:
.image-wrapper > .isi.geser-kiri {
mengubah: translateX(100%)
}.image-wrapper:arahkan > .isi.geser-kiri {
mengubah: translateX(0%)
}.image-wrapper:arahkan > img.abu-abu {
Saring: skala abu-abu(1)
}.image-wrapper:arahkan > img.mengaburkan {
Saring: mengaburkan(5px)
}
.image-wrapper:arahkan > img.Perbesar {
mengubah: skala(1.1)
}
Simpan file, lalu buka browser Anda dan arahkan kursor ke setiap gambar. Anda harus melihat efek yang berbeda dalam tindakan.
Untuk melengkapi efek slide-in, Anda dapat membuat tiga pembungkus gambar lagi, masing-masing berisi gambar dan teks. Setiap potongan teks akan memiliki nama kelas slide-up, meluncur ke bawah, atau sedikit-kanan. Kemudian Anda akan memberikan nilai yang tepat piksel, em, atau rem, di dalam mengubah() berfungsi untuk menciptakan ketiga efek tersebut.
Kotak CSS dan Flexbox
CSS Grid dan Flexbox adalah dua fitur yang memungkinkan Anda membuat tata letak yang fantastis untuk situs web Anda. Anda dapat membuat hampir semua tata letak yang Anda inginkan dengan mudah dan menyesuaikan baris dan kolom sesuai selera Anda. Kolom juga akan responsif secara default. Mempelajari kapan harus menggunakan salah satu dari yang lain akan membantu Anda menjadi pengembang CSS satu persen teratas.
