Efek Transisi Hover Gambar CSS
Hari ini kami telah membuat set Efek Transisi Hover Gambar CSS yang tidak boleh Anda lewatkan. Kami membangun beberapa efek yang lebih unik dan mudah diterapkan.
Anda hanya perlu melakukan copy & past source code dan selesai. Kumpulan efek transisi ini memungkinkan Anda menambahkan konten, ikon, dan tautan, dll. Di atas gambar.
Kami telah membuat tiga efek hover gambar gaya unik menggunakan HTML & CSS. Semua efek datang dengan variasi warna yang berbeda. Kami mencoba untuk membuat markup HTML sesederhana mungkin.
Setiap penggunaan efek figure elemen yang menampung gambar, ara caption, H3, dan semua elemen HTML lainnya.
Cara Membuat Efek Transisi Hover Gambar CSS
Anda dapat melihat kode contoh efek hover gambar pertama di sini. Kita punya figure elemen dengan nama kelas HoverSnip_1.
Kami memiliki kelas berbeda untuk warna yang hanya perlu Anda tambahkan HoverSnip_1. Di sini kami memiliki nama kelas oranye.
<figure class="HoverSnip_1 orange"> <img src="https://codeconvey.com/css-image-hover-transition-effects/img/hover1.jpg" alt=""/> <figcaption> <i class="ion-ios-rose"></i> <h4>Beautiful</h4> <h3>Rose</h3> </figcaption> <a href="https://codeconvey.com/css-image-hover-transition-effects/#"></a> </figure>
Dalam figure kami menempatkan tag gambar dan kemudian figcaption. Keterangan gambar memegang ikon, judul, dan konten, dll.
Pastikan Anda harus menempatkan tautan tautan di luar keterangan gambar yang memungkinkan terciptanya efek hover.
Styling Efek Transisi
Sebelum kita mulai dengan gaya, Anda perlu memastikan untuk menambahkan ukuran kotak untuk setiap efek atau Anda dapat menentukannya secara global untuk semua efek hover. Jadi inilah kode masuk.
figure.HoverSnip_1 * { -webkit-box-sizing: padding-box; box-sizing: padding-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } i) Gambar Styling
Kami melakukan beberapa gaya dasar untuk wadah atau pembungkus utama. Di sini kita telah mendefinisikan elemen HTML5 gambar sebagai pembungkusnya. Kita perlu mengatur posisi relatif dan mengatur lebar sesuai kebutuhan kita. Untuk membuatnya responsif, kami akan menggunakan min dan max-width.
figure.HoverSnip_1 { font-family: 'Raleway', Arial, sans-serif; position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 230px; max-width: 366px; width: 100%; color: #000000; text-align: center; -webkit-perspective: 50em; perspective: 50em; } ii) figcaption
Judul ara akan menjadi bagian tersembunyi dari efek hover dan akan muncul saat Anda mengarahkan kursor ke gambar. Untuk menyembunyikan, kami menggunakan opacity nol dan untuk menyimpannya pada gambar dengan ukuran yang tepat, kami akan menggunakan posisi absolute. Satu hal lagi, kami menetapkan lebar maksimal 100% untuk gambar agar mendapatkan hasil yang responsif.
figure.HoverSnip_1 figcaption { top: 50%; left: 20px; right: 20px; position: absolute; opacity: 0; z-index: 1; } figure.HoverSnip_1 img { max-width: 100%; vertical-align: top; } iii) Gambar Setelah
Sekarang kita akan pucat dengan gambar dengan menggunakan :after properti. Dengan menggunakan ini, kita akan menggunakan transisi dan transformasi.
figure.HoverSnip_1:after { background-color: #ffffff; position: absolute; content: ""; display: block; top: 20px; left: 20px; right: 20px; bottom: 20px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; opacity: 0; } iv) Figcaption & Gambar Hover
Untuk menampilkan caption ara dan mendapatkan animasi dari gambar tersebut, kita akan menggunakan translateY untuk keterangan fig dan translateX untuk gambar tersebut.
figure.HoverSnip_1:hover figcaption { -webkit-trasform: translateY(-50%); transform: translateY(-50%); opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } figure.HoverSnip_1:hover:after { -webkit-transform: rotateX(0); transform: rotateX(0); opacity: 0.9; } v) Gaya Umum
Berikut adalah kode gaya umum CSS Hover Effects. Gaya ini untuk h3, h4, dan ikon, dll.
figure.HoverSnip_1 h3, figure.HoverSnip_1 h4 { margin: 0; } figure.HoverSnip_1 h3 { font-weight: 600; } figure.HoverSnip_1 h4 { font-weight: 400; text-transform: uppercase; } figure.HoverSnip_1 i { font-size: 32px; } figure.HoverSnip_1.green:after { background-color: #229955; } figure.HoverSnip_1.orange:after { background-color: #d67118; } figure.HoverSnip_1 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; } Kami telah menjelaskan kepada Anda proses membangun Efek transisi untuk efek pertama saja. Anda dapat menemukan semua efek hover lainnya di demo dan sumber unduhan. Saya harap Anda menikmati tutorial CSS3 ini dan merasa berguna.
