WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
CSS / Animations and Effects

Image Hover CSS LIbrary

— Tambah-On untuk WorldWideScripts.net

Melanggan suapan kami untuk kekal sehingga tarikh!

Baru! Ikut kami yang anda mahu!


Image Hover CSS LIbrary - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Imej Hover CSS Libraryv1.0

A berskala & Light Image Hover CSS Library

Sebuah perpustakaan CSS penuh kasih sayang direka sehingga dapat dengan mudah melaksanakan kesan imej hover berskala. 58 kelas kesan hover untuk dipilih perpustakaan CSS berat dalam pada saiz yang minified hanya 28KB. Setiap kesan menggunakan markup asas yang sama yang membolehkan anda untuk menukar kesan dengan hanya mengedit kelas yang mengandungi.


Penggunaan asas

  1. Termasuk stylesheet imagehover.css pada dokumen anda <head>

     <head> <link rel="stylesheet" href="imagehover.min.css"> </head> 
  2. Place markup berikut dalam dokumen HTML anda

     <figure class="imghvr-fade"> <img src="#"> <figcaption> // Hover Content </figcaption> </figure> 
  3. Mengedit URL untuk imej anda dan menambah kandungan hover anda. Kemudian hanya menetapkan kelas imagehover.css pilihan anda dengan unsur angka yang mengandungi. Dalam contoh di atas ini telah ditetapkan kepada 'imghvr pudar. Senarai penuh kesan hover dan kelas mereka boleh didapati di bawah!.


Menambah Link a

Untuk menghubungkan imej anda, menambah tag <a> kosong selepas elemen figcaption itu.

 <figure class="imghvr-fade"> <img src="#"> <figcaption> // Hover Content </figcaption> <a href="http://www.imagehover.io"></a> </figure> 

Warna latar belakang

Anda boleh menukar warna latar belakang melalui beberapa inline CSS ditambah dengan unsur angka seperti ini...

 <figure class="imghvr-fade" style="background-color:#D14233;"> <img src="#"> <figcaption> // Hover Content </figcaption> </figure> 

Sebagai alternatif ini boleh digunakan melalui fail CSS anda. Contoh berikut akan memberi kesan semua elemen dengan kelas imagehover.css digunakan.

 *[class^='imghvr-'], *[class*=' imghvr-'] { background-color: #D14233; } 

Warna Caption Latar Belakang

Dalam kebanyakan kes, anda boleh menukar warna latar belakang kapsyen melalui beberapa inline CSS ditambah dengan unsur angka seperti ini...

 <figure class="imghvr-fade"> <img src="#"> <figcaption style="background-color:#D14233;"> // Hover Content </figcaption> </figure> 

Sebagai alternatif ini boleh digunakan melalui fail CSS anda. Contoh berikut akan memberi kesan semua elemen dengan kelas imagehover.css digunakan.

 *[class^='imghvr-'] figcaption, *[class*=' imghvr-'] figcaption { background-color: #D14233; } 

Sokongan pelayar

Imagehover.css bergantung heavely pada beberapa ciri-ciri CSS3 inlcuding pseudo-unsur, animasi, peralihan dan jelmaan. Sesetengah pelayar yang lebih tua akan mempunyai sokongan terhad ciri-ciri ini.


Memuat turun
Komponen-komponen lain dalam kategori iniSemua komponen pengarang ini
KomenSoalan-soalan lazim dan jawapan

Properties

dicipta:
9 Mac 16

Kemaskini:
9 Mac 16

Pelayar Sesuai:
IE10, IE11, Firefox, Safari, Opera, Chrome, Edge

fail Termasuk:
HTML, CSS

Versi perisian:
CSS2, CSS3

Kata kunci

eCommerce, eCommerce, semua Item, animasi, kapsyen, css, CSS3, hover, gambar, imagehover, peralihan