Efek Hover Gambar CSS3 dengan Teks
Hari ini kita akan membuat Efek Hover Gambar CSS3 unik dengan Caption yang mudah diterapkan. Anda hanya perlu menyalin & menempel kode di halaman web Anda dan selesai.
Jika Anda seorang desainer web atau pengembang front-end maka Anda pasti menyukai efek Image hover. Efek ini memiliki desain yang mengagumkan dan termasuk 8 efek berbeda yang menunjukkan judul teks dan deskripsi saat pengguna mengarahkan mouse ke gambar.
Segala jenis animasi web selalu menyenangkan karena menciptakan bakat pada komponen situs web yang berbeda. Ketika kita berbicara tentang efek hover, Mereka dikembangkan dengan menggunakan animasi CSS3, transisi dan penerjemah 3G.
Untuk membuat efek yang indah dan halus atau menampilkan teks saat mengarahkan kursor, kita perlu bermain-main dengan properti CSS ini.
Tidak ada keraguan bahwa mereka meningkatkan tampilan dan nuansa situs web Anda dan membuatnya mudah bagi pengguna untuk menavigasi di seluruh situs.
Ada banyak cara untuk mengembangkan Efek Hover Gambar HTML & CSS. Anda dapat membuatnya menggunakan Javascript, jQuery, dan CSS3. Selain itu, Anda dapat menggabungkan jQuery dengan CSS3 untuk mengembangkan efek yang menarik.
Karena popularitasnya yang tinggi di dunia desain web, saya berpikir untuk berbagi dengan Anda beberapa efek hover unik yang menampilkan teks tersembunyi dengan cara yang rapi dan bersih.
Cara Membuat Efek Hover Gambar CSS3 dengan Caption
Markupnya bersih dan teratur. Ini dimulai dengan div grid dengan kelas unik untuk setiap efek. Ada sekitar 8 efek berbeda dan masing-masing memiliki kelasnya sendiri.
Setiap item berisi figure sebuah elemen yang termasuk sebuah imgmenandai. Itu figure elemen juga mengandung a figcaption dengan judul, teks, dan tautan.
<ul class="grid cs-style-1"> <li> <figure> <img src="https://codeconvey.com/css3-image-hover-effects-with-caption/images/1.png" alt="img01"> <figcaption> <h3>Camera</h3> <span>Jacob Cummings</span> <a href="http://dribbble.com/shots/1115632-Camera">Take a look</a> </figcaption> </figure> </li> </ul>
Terapkan Gaya CSS3
Mari kita mulai dengan grid dan menerapkan beberapa gaya umum termasuk text-align, margin, dan padding, dll. Item daftar juga memerlukan beberapa gaya untuk menangani elemen gambar.
Dengan bantuan blok-sebaris, Kami dapat memusatkan item daftar dengan menerapkan perataan teks ke induk.
.grid { padding: 20px 20px 100px 20px; max-width: 1300px; margin: 0 auto; list-style: none; text-align: center; } .grid li { display: inline-block; width: 440px; margin: 0; padding: 20px; text-align: left; position: relative; }Sekarang kita akan mengatur ulang margin figure elemen dan setel posisinya menjadi relatif.
.grid figure { margin: 0; position: relative; }Untuk membuat gambar berfungsi di ponsel, Kami akan menambahkan lebar 100% yang membantu mengubah ukuran gambar saat kami menentukan kueri media untuk item daftar
.grid figure img { max-width: 100%; display: block; position: relative; }Untuk figure Kami sudah memiliki posisi relatif untuk itu figcaption kami akan mengatur posisinya secara mutlak.
.grid figcaption { position: absolute; top: 0; left: 0; padding: 20px; background: #2c3f52; color: #ed4e6e; }Dan terakhir, Kami akan memberi gaya untuk judul, teks, dan tautan:
.grid figcaption h3 { margin: 0; padding: 0; color: #fff; } .grid figcaption span:before { content: 'by '; } .grid figcaption a { text-align: center; padding: 5px 10px; border-radius: 2px; display: inline-block; background: #ed4e6e; color: #fff; }Untuk membuatnya berfungsi dengan baik di ponsel dan tablet, Kami akan menerapkan kueri media.
@media screen and (max-width: 31.5em) { .grid { padding: 10px 10px 100px 10px; } .grid li { width: 100%; min-width: 300px; } }Itu dia! Temukan semua efek di file sumber dan lihat demo.
