Membuat Efek 3D Hover Pada Gambar Di Blog Dengan Css3
Dalam posting kali ini aku akan membahas perihal cara memasang imbas hover 3D pada gambar di blog dengan memakai CSS3. Tanpa panjang lebar, berikut ini misalnya gambar yang memakai imbas 3D dengan memakai CSS3, silakan coba arahkan kursor teman diatas gambar tersebut dan lihat hasilnya.
Untuk menciptakan hal serupa di blog teman memerlukan beberapa kode, aba-aba yang dipakai hanya ada dua jenis, ialah HTML dan CSS dengan hasil yang cukup ringan jikalau dibandingkan dengan imbas yang ditampilkan. Untuk sanggup memakai imbas tersebut pertama-tama teman pasang aba-aba CSS imbas tersebut pada blog teman dengan membuka dashboard blogger pilih Template kemudian klik Edit HTML. Setelah itu temukan aba-aba
]]></b:skin> dan tempelkan aba-aba berikut diatasnya..thumb { width: 400px; height: 300px; margin: 20px auto 50px; perspective: 1000px; } .thumb a { display: block; width: 100%; height: 100%; /*double layered BG for lighting effect*/ background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ0NtdN6mwvDI6vl3F78pPdvefuDEPQNLZwrB8oW4KzS1k9YLEvcYNJLXlL9EUvdEwDXsq1w_leXqY8rhZgSWsamP9uXEGx5878-YyEMn3HfXB1tTKWLVDsmeG6C8Gs8My7dXlHrKUC-mU/s640/pine+tree+forest+wallpaper.jpg"); /*disabling the translucent black bg on the main image*/ background-size: 0, cover; /*3d space for children*/ transform-style: preserve-3d; transition: all 0.5s; } .thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;} /*bottom surface */ .thumb a:after { /*36px high element positioned at the bottom of the image*/ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 36px; /*inherit the main BG*/ background: inherit; background-size: cover, cover; /*draw the BG bottom up*/ background-position: bottom; /*rotate the surface 90deg on the bottom axis*/ transform: rotateX(90deg); transform-origin: bottom; } /*label style*/ .thumb a span { color: white; text-transform: uppercase; position: absolute; top: 100%; left: 0; width: 100%; font: bold 12px/36px Montserrat; text-align: center; /*the rotation is a bit less than the bottom surface to avoid flickering*/ transform: rotateX(-89.99deg); transform-origin: top; z-index: 1; } /*shadow*/ .thumb a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); transition: all 0.5s; /*by default the shadow will be almost flat, very transparent, scaled down with a large blur*/ opacity: 0.15; transform: rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin: bottom; } .thumb:hover a:before { opacity: 1; /*blurred effect using box shadow as filter: blur is not supported in all browsers*/ box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5); /*pushing the shadow down and scaling it down to size*/ transform: rotateX(0) translateZ(-60px) scale(0.85); }Setelah itu silakan teman ganti bab yang
ditandai pada aba-aba CSS diatas dengan URL gambar yang teman inginkan. Dengan itu selesailah pemasangan imbas 3D di blog sobat. Selanjutnya penggunaan aba-aba HTML nya, pasang aba-aba HTML imbas ini pada dikala menulis artikel atau posting di blog sobat, tempelkan dalam mode penulisan HTML<div class="thumb"> <a href="https://loper-artikel.blogspot.com"><span class="hadi"> Blog</span></a></div>Silakan ganti bab yang
ditandai pada aba-aba HTML diatas sesuai dengan impian sobat, sehabis itu lihatlah hasilnya, apabila gambar yang diinginkan tidak tampil sesuai yang diperlukan harap periksa kesalahan yang mungkin ada, misal terdapat aba-aba CSS yang saling mempengaruhi atau ada aba-aba yang rusak/terpotong.Mungkin cukup sekian yang sanggup aku sampaikan, biar saja sanggup bermanfaat, apabila terdapat hal-hal yang keliru silakan teman sampaikan melalui kotak komentar yang ada dibawah atau sanggup juga melalui halaman contact blog ini. Terima kasih.
