Cara Menambahkan Animasi Pengungkapan CSS ke Gambar Anda – beragampengetahuan – Beragampengetahuan

Pada artikel ini, kita akan menjelajahi beberapa trik CSS yang memungkinkan kita membuat animasi hover untuk menampilkan gambar kita.

Kita mungkin berpikir “yah, itu tugas yang mudah! Tambahkan elemen tambahan di atas gambar yang Anda animasikan dan selesai.” Benar, tetapi kita tidak akan menggunakan elemen tambahan atau elemen semu.Kami hanya akan menggunakan <img> elemen. Itu saja!

Ini mungkin terdengar tidak mungkin, karena hanya menggunakan elemen gambar, kita tidak dapat menambahkan apa pun di atasnya. Benar, kami tidak akan memiliki apa pun di dalamnya, tetapi kami akan memalsukannya!

Inilah demo CodePen tentang apa yang akan kita jelajahi bersama.

melihat pena
Sebuah elemen oleh Temani Afif (@t_afif) menunjukkan efek hover
di CodePen.

keren kan? Tampilkan animasi hanya menggunakan beberapa baris kode dan tanpa elemen tambahan. Ikutlah denganku saat kita membedah keajaiban di balik kode.

konfigurasi awal

Kita akan mulai dengan menentukan ukuran gambar:

img {
  --s: 200px; 

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
}

Tidak ada yang rumit sejauh ini. Untuk mempermudah, kami menggunakan gambar persegi, tetapi gambar dengan ukuran berapa pun bisa.Penting untuk mengatur secara eksplisit width Dan height Alih-alih menggunakan aspect-ratio Atau pertahankan ukuran default gambar. Ini wajib untuk animasi kita, kita akan lihat alasannya nanti.

Perhatikan penggunaan box-sizing: border-box Sekali lagi, ini penting. Saat ini tidak berpengaruh, tetapi mari beralih ke langkah berikutnya untuk melihat mengapa diperlukan.

tambahkan beberapa bantalan

Apa yang terjadi jika kita menambahkan beberapa pengisi ke gambar yang memiliki ukuran tetap yang ditentukan dan digunakan box-sizing: border-box? Mari kita coba!

melihat pena
Temani Afif (@t_afif) tanpa nama
di CodePen.

Gambar tergencet, seperti yang bisa kita lihat pada demo di atas.kita meningkat 100px padding di sebelah kiri, ini hanya akan meninggalkan 100px Ruang gambar (area konten).ini efeknya box-sizing: border-box.

Seperti yang dijelaskan di MDN:

border-box Memberitahu browser untuk mempertimbangkan border dan padding apa pun dalam nilai yang Anda tentukan untuk lebar dan tinggi elemen. Jika Anda menyetel lebar elemen menjadi 100 piksel, 100 piksel tersebut akan menyertakan batas atau bantalan apa pun yang Anda tambahkan, dan kotak konten akan menyusut untuk menyerap lebar ekstra.

Sekarang, bayangkan situasi di mana padding sama dengan lebar. Ya, gambarnya akan hilang! Dalam demo di bawah ini, arahkan kursor ke atas gambar dan lihat hasilnya.

melihat pena
Isi animasi oleh Temani Afif (@t_afif)
di CodePen.

Ada dua poin dalam demo di atas yang perlu mendapat perhatian khusus. Padding bisa dianimasikan, yang keren, dan kita bisa melihat pentingnya variabel CSS yang kita gunakan sebelumnya untuk menentukan ukuran gambar. Kami menggunakan variabel yang sama untuk menentukan isian, jadi kami tidak perlu mengulangi nilai yang sama.

Tambahkan warna latar belakang

Mari kita ambil contoh sebelumnya dan tambahkan latar belakang.

melihat pena
Temani Afif (@t_afif) tanpa nama
di CodePen.

Kami mulai membuat kemajuan sekarang. Latar belakang secara logis akan mencakup seluruh elemen. Kami tidak melihatnya di bawah gambar (kecuali kami menggunakan gambar dengan transparansi), tetapi kami melihatnya di area yang terisi.

Tujuan kita adalah untuk menampilkan sebuah gambar, jadi mari kita mulai dengan padding, lalu membuatnya 0 Hover – Kebalikan dari apa yang kita miliki saat ini.

melihat pena
Temani Afif (@t_afif) tanpa nama
di CodePen.

Itu masih bukan tujuan kita, tapi kita semakin dekat! Kami hanya kehilangan satu bahan untuk membuat animasi pengungkapan “palsu” kami sempurna!

Tambahkan Object Fit dan Object Position

Bagian yang hilang adalah untuk menjaga agar gambar tidak tergencet, dan inilah trik terakhirnya.kita akan menggunakan object-fit Dan cover nilai.

Seperti yang dijelaskan di MDN:

Ukuran konten yang diganti mempertahankan rasio aspeknya sambil mengisi seluruh kotak konten elemen. Jika rasio aspek objek tidak cocok dengan bingkainya, objek akan dipotong agar pas.

Ada dua bagian yang penting di sini:

• “Ukuran konten yang diganti mempertahankan rasio aspeknya”. Ini berarti gambar tidak akan tergencet, tetapi akan mempertahankan proporsi intrinsiknya. Kami menggunakan gambar persegi, sehingga akan tetap persegi.
• “Seluruh kotak konten yang mengisi elemen…akan dipotong agar pas”. Gambar harus memenuhi semua area konten (area yang kita kurangi dengan menambahkan beberapa padding), tetapi jika tidak muat di dalamnya, kita akan memotongnya.

Mari kita coba dalam demo di bawah ini.

melihat pena
Temani Afif (@t_afif) tanpa nama
di CodePen.

melihatnya? Gambar tidak lagi tergencet! Saat kami menambah/menghapus bantalan, proporsinya tetap berada di dalam area konten.

OK, jadi kami mungkin berpikir efeknya berbeda dari demo awal. Gambar bergerak aneh. nyata.Jadi sekarang kita beralih ke object-position.Defaultnya adalah center, sehingga gambar akan selalu berada di tengah area konten dan akan dipotong agar pas di dalamnya. Itu sebabnya bergerak dengan animasi.

Apa yang kita lakukan selanjutnya harus mudah diprediksi. Kami akan mengubah posisi untuk memastikan gambar tidak bergerak.Kita akan menambahkan padding dari kiri, jadi kita harus memperbaiki posisi gambar ke kanan menggunakan object-position: right.

melihat pena
Temani Afif (@t_afif) tanpa nama
di CodePen.

Animasi pengungkapan kami selesai! Kami tidak memerlukan overlay atau elemen tambahan di atas gambar. Dengan menggunakan warna latar belakang yang sederhana, dan beberapa trik pemosisian gambar, kami mendapatkan animasi tampilan mewah dengan sedikit kode sederhana.

Kita dapat menyesuaikan padding arah dan object-position.Ini adalah demo pertama sebelumnya, yang mencakup empat arah.

melihat pena
Sebuah elemen oleh Temani Afif (@t_afif) menunjukkan efek hover
di CodePen.

Berikut adalah CSS yang kami gunakan:

img {
  --s: 200px; 

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
  object-fit: cover;
  cursor: pointer;
  transition: .5s;
}

img.left {
  object-position: right;
  padding-left: var(--s);
  background: #542437;
}

img.right {
  object-position: left;
  padding-right: var(--s);
  background: #8A9B0F;
}

img.top {
  object-position: bottom;
  padding-top: var(--s);
  background: #E94E77;
}

img.bottom {
  object-position: top;
  padding-bottom: var(--s);
  background: #7A6A53;
}

img:hover {
  padding: 0;
}

Lebih banyak animasi tampilan

Kami dapat memperluas trik untuk membuat lebih banyak variasi menggunakan ide yang sama. Alih-alih menambahkan/menghapus padding dari satu sisi, kita bisa melakukannya di kedua sisi atau bahkan semua sisi.

melihat pena
Tampilkan efek hover untuk elemen II oleh Temani Afif (@t_afif)
di CodePen.

Jika kita cek kode demo di atas, kita tidak akan menemukan banyak perbedaan dari kode sebelumnya. Yang kami lakukan hanyalah mengatur konfigurasi isian yang berbeda untuk membuat lebih banyak variasi untuk efek yang sama.

Ada trik di contoh pertama dan terakhir yang kami gunakan object-fit: none mengganti object-fit: coverDalam kasus ini padding akan mengurangi lebar Dan Area konten memiliki tinggi 0, sedangkan dalam semua kasus lainnya kami mengurangi tinggi atau lebarnya. Dalam konfigurasi seperti itu, cover tidak bekerja, tapi none dapat melakukan pekerjaan.

Status MDN:

Konten yang diganti tidak diubah ukurannya.

Kenapa tidak kita pakai saja none dalam segala situasi?kita mampu Gunakan ini, dan berhasil, tetapi memiliki sedikit kelemahan. none Ukuran intrinsik gambar akan diperhitungkan, jadi kita harus membuat lebar dan tinggi CSS sama dengan ukuran intrinsik agar triknya bekerja. coverdi sisi lain, cukup pertahankan proporsi gambar dan ubah ukurannya agar sesuai dengan area, sehingga kita dapat dengan aman menentukan ukuran CSS apa pun untuk gambar tersebut.

Berikut perbandingannya agar kita bisa melihat perbedaannya.

melihat pena
Temani Afif (@t_afif) tanpa nama
di CodePen.

Dalam kedua kasus kami memiliki animasi tampilan, tetapi saat menggunakan object-fit: nonegambar tidak diubah ukurannya dan tetap pada ukuran standarnya (500x500), yang tidak baik. object-fit: cover Pertahankan saja proporsinya dan akan mengubah ukuran gambar agar sesuai dengan dimensi kotak.

Kesimpulannya

Saya harap Anda menikmati percobaan CSS kecil ini.Menggunakan trik sederhana dan beberapa baris kode, kami hanya menggunakan <img> elemen. Kami juga membuat banyak variasi menggunakan struktur kode yang sama.

Kita bisa melakukan lebih banyak dengan trik ini. Saya akan memberi Anda satu contoh terakhir di mana saya mengonversi gambar hitam putih menjadi gambar berwarna saat melayang.

melihat pena
Mewarnai gambar dengan efek slide hover oleh Temani Afif (@t_afif)
di CodePen.

Saya akan membiarkan Anda terus menjelajah dan mencoba menemukan lebih banyak animasi mewah!