Efek Hover Gambar Kreatif dengan CSS3

sukma
sukma
3 minute read

Hari ini kami memiliki koleksi Creative Image Hover Effects yang dibuat dengan CSS3 & HTML. Ada lebih dari 60 efek dan Anda dapat memilih satu atau lebih yang ingin Anda gunakan di situs web Anda.

Koleksi besar efek hover Gambar kreatif menggunakan CSS3 ini memberi Anda lebih banyak pilihan untuk memilih efek terbaik untuk template web Anda

Efek ini membuat situs web Anda terlihat berbeda dan meningkatkan pengalaman pengguna. Semuanya memungkinkan Anda untuk menampilkan beberapa judul dan deskripsi di atas gambar dan itu akan ditampilkan saat pengguna mengarahkannya.

Anda dapat dengan mudah menyesuaikannya hanya dengan mengedit CSS agar sesuai dengan kebutuhan Anda. Efek gambar ini responsif dan juga berfungsi di semua browser utama.

Cara Membuat Efek Hover Gambar Kreatif

Kami akan mulai dengan markup yang sederhana dan mudah dipahami. Semua efek yang ditentukan kode HTML di dalam dua div. Yang pertama adalah div utama kita dan yang kedua adalah div anak dengan nama kelas effects.

Setiap tempat efek gambar di dalam nama kelas div demo dan kemudian mendefinisikan elemen gambar HTML5 yang menahan gambar.

Itu juga menggunakan figcaption Elemen HTML5 yang menampung teks, judul, dan tautan. Di sini kita memiliki dua contoh kode HTML efek pertama.

<div class="main">   <div class="effects" id="effects">     <div class="demo">       <figure class="imghvr-fade"><img src="https://placehold.it/360x270" alt="01">         <figcaption>           <h3>Oscar Wilde</h3>           <p>&quot;You can never be overdressed or overeducated.&quot;</p>         </figcaption><a href="javascript:;"></a>       </figure>     </div>     <div class="demo">       <figure class="imghvr-push-up"><img src="https://placehold.it/360x270" alt="02">         <figcaption>           <h3>Oscar Wilde</h3>           <p>&quot;You can never be overdressed or overeducated.&quot;</p>         </figcaption><a href="javascript:;"></a>       </figure>     </div>   </div> </div>

Gaya

CSS agak panjang karena ada 60+ efek, jadi kami akan menjelaskan beberapa gaya penting di sini, tetapi Anda dapat menemukan semua gaya di file sumber unduhan.

Penggunaan CSS berikut ini harus menambahkan semua efek apakah Anda ingin menggunakan satu atau lebih efek. Ini adalah gaya umum di mana kita akan mengatur font-family, margin, max-with, dan background-color, dll.

[class*=' imghvr-'], [class^=imghvr-] {   font-family: Montserrat, sans-serif;   position: relative;   display: inline-block;   margin: 0;   max-width: 100%;   background-color: rgba(230, 230, 230, .7);   color: #666;   overflow: hidden;   -moz-osx-font-smoothing: grayscale;   -webkit-backface-visibility: hidden;   backface-visibility: hidden;   -webkit-transform: translateZ(0);   transform: translateZ(0) } [class*=' imghvr-'] img, [class^=imghvr-] img {   vertical-align: top;   max-width: 100% }

Mirip, kami memiliki gaya umum untuk file figcaption elemen di mana kami akan melakukan hal yang sama.

[class*=' imghvr-'] figcaption, [class^=imghvr-] figcaption {   background-color: rgba(255, 255, 255, .9);   padding: 20px;   position: absolute;   top: 15px;   bottom: 15px;   left: 15px;   right: 15px;   border: 1px solid rgba(0, 0, 0, .1) }

Untuk setiap efek, kami memiliki gaya yang berbeda. Sebagai contoh, Katakanlah kita ingin menggunakan efek Fade daripada tampilan kode kita:

.imghvr-fade figcaption, .imghvr-fade:hover img {   opacity: 0 } .imghvr-fade:hover figcaption {   opacity: 1 }

Itu dia. Bagikan dengan teman Anda dan tinggalkan umpan balik Anda.