Efek Hover Gambar HTML & CSS dengan Teks

Saatnya membuat satu set Efek Hover Gambar HTML & CSS yang menampilkan teks saat mengarahkan kursor. Efek foto ini memiliki beberapa animasi hebat dan desain baru. Kami menyertakan 14 efek modern dan halus yang menonjolkan situs Anda.

Efek modern ini pasti akan mencerahkan situs web Anda. Kami akan membuat beberapa animasi kreatif menggunakan teknik CSS3 tingkat lanjut.

Efek hover juga dapat dibuat menggunakan Jquery, tetapi itu akan mempengaruhi kecepatan website Anda. Saya akan membagikan solusi CSS murni.

Efek ini dikembangkan menggunakan transisi CSS3 dan mudah untuk menerapkan efek pada semua jenis situs web. Anda hanya perlu menyalin kode HTML untuk efek tertentu dan menambahkan file style.css. Itu dia.

Setelah CSS3 masuk ke pasar, Mendesain situs web dan elemennya menjadi lebih mudah bagi para desainer. Anda dapat membuat efek tampilan yang cantik dan mengagumkan dengan cepat.

Saat ini trend desain web banyak berubah. Para desainer suka bermain dengan animasi dan CSS3 memungkinkan menghadirkan sesuatu yang baru di setiap tata letak situs web.

Karena tren ini, Kami berpikir untuk membuat dan membagikan beberapa item modern yang kreatif menggunakan CSS3.

Cara Membuat Efek Hover Gambar HTML & CSS

Saya akan memandu Anda tentang membuat efek hover gambar pertama di sini. Proses membuat efek lain hampir serupa tetapi tentu saja membutuhkan animasi dan sedikit perubahan HTML.

Anda dapat menemukan semua efek lainnya di demo dan file kode sumber.

Mari kita mulai dengan membuat efeknya.

Kami memiliki nama kelas pembungkus utama bg-items yang dibungkus dengan beberapa div anak. Div turunan ini menyertakan div item dengan gambar latar belakang dan div yang akan menampilkan konten saat mengarahkan kursor ke gambar.

Sadarilah bahwa kita akan menggunakan gambar sebagai latar belakang dan menambahkan kelas items untuk setiap gambar latar belakang. Markup akan muncul seperti ini:

<div class="bg-items">     <div class="items" style="background-image : url('img/baby-1399332_960_720.jpg');">       <div class="one"></div>       <div class="details">         <h3>Effect #1</h3>         <p>Fusce eros mauris, vehicula vel rhoncus id, accumsan at justo.                Nulla nec ex mollis, rhoncus quam quis, feugiat quam. Donec auctor turpis ex,               a pretium tellus mollis sed. Nam vehicula libero at nulla euismod.          </p>         <h6>Date: 5/5/2016</h6>       </div>     </div> </div> 

Kami juga ingin menyebutkan di sini, Kami juga harus menambahkan wadah utama dan semua sumber gambar akan berada di dalam. Kelas kontainer ini bernama Hvcontainer

Gaya

Untuk CSS kita, pertama-tama kita perlu menambahkan beberapa CSS umum yang harus digunakan untuk setiap rangkaian efek. Kita perlu mengatur lebar 48% untuk membuat desain 2 kolom. Di sini Anda dapat mengubahnya dan menjadikannya 3 kolom dengan cepat.

Nama kelas div items harus memiliki pemosisian relatif dengan tampilan sebaris.

Saya juga meletakkan beberapa gaya dasar untuk tag H2 dan P. Selain tag gambar, Kita dapat menggunakan transisi CSS3 untuk membuat dampak yang mulus.

.bg-items {     cursor: pointer;     display: inline-block;     float: left;     margin: 1%;     width: 48%; } .items {     background-color: #C97131;     background-size: cover;     height: 286px;     overflow: hidden;     position: relative;     width: 100%; } .details {     color: #fff;     font-family: "Jaldi",sans-serif;     font-size:25px;     height: 286px;     left: 0;     opacity: 0;     padding: 5%;     top: 0;     transition: opacity 0.8s ease 0s;     width: 90%; } .opticy{    background-color : rgba(0,0,0,0.5); } .details h3 {   margin-bottom : 20px; } .details h6 {   text-align : right;   margin-top : 40px; } .details p {   font-size : 14px;   font-style: italic;   text-align: center;   line-height : 20px; } .items:hover .details {   opacity : 1;   -webkit-transition: opacity .2s .3s;   transition : opacity .2s .3s; } .items div {   position : absolute; } 

Untuk membuat efek pada hover, Kita akan bermain dengan beberapa elemen desain yang meliputi pengaturan nilai untuk elemen posisi dan menambahkan beberapa warna latar belakang dan juga transisi yang dapat berubah sesuai kebutuhan.

Saat mengarahkan, Kami mengatur kiri dan bawah menjadi 0 untuk membuat efek ini.

.one {   left   : 100%;   bottom : 100%;   width : inherit;   height: inherit;   background-color : rgba(254, 219, 29, 0.7);   -webkit-transition: all .3s;   transition   : all .3s; } .items:hover .one {   -webkit-transition: all .3s;   transition   : all .3s;   left   : 0;   bottom : 0; } 

Jika Anda ingin menerapkan efek kedua dari demo daripada di sini adalah contoh kode. Efek ini bekerja sama dengan yang pertama tetapi kiri harus nol pada posisi normal tetapi bagian bawah akan 100%. Saat mengarahkan kursor, keduanya akan menjadi 0.

.two {   width : inherit;   height: inherit;   background-color : rgba(254, 219, 29, 0.7);   -webkit-transition: all .3s;   transition   : all .3s;   left   : 0;   bottom : 100%; } .items:hover .two {   -webkit-transform : rotate(180deg);           transform : rotate(180deg);   left   : 0;   bottom : 0;   -webkit-transition: all .3s;   transition   : all .3s; } 

Beri tahu kami bagaimana Anda menemukan sumber daya yang berguna ini dan bagikan dengan teman-teman Anda.