Home ยป Belajar HTML Dan CSS3 Membuat Mouseover Zoom Dan Efek Thumbnail

Belajar HTML Dan CSS3 Membuat Mouseover Zoom Dan Efek Thumbnail

Belajar HTML Dan CSS3 Membuat Mouseover Zoom Dan Efek Thumbnail


Labkom99.com – Membuat mouseover zoom dan efek thumbnail menggunakan css3 sehingga menghasilkan zoom in dan efek bayangan pada gambar. Ketika mouse melayang di atas gambar bagian tengah gambar diperbesar di tempat asalnya dan kemudian ada layer ditampilkan disekitar gambar.

Dalam tutorial ini kita akan belajar bagaimana memanfaatkan CSS3 dengan cara yang sangat sederhana. Kami akan membuat efek hover thumbnail dengan transisi CSS3. Saat mengarahkan kursor ke gambar akan menampilkan deskripsi gambar dan memperbesar gambar.
Belajar HTML Dan CSS3 Dengan Tema Lain.

Berikut adalah surce code Dengan menggunakan HTML dan CSS3


HTML

Struktur HTML sangat sederhana dan intuitif ini adalah tempat dimana gambar dan informasi lain berada. Di dalam tampilan masukkan elemen dengan kelas yang membuat efek dengan CSS3 dan di dalamnya ada judul, deskripsi dan tautan ke gambar penuh. 

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="box">
                <img src="images/img-1.jpg">
                <div class="box-content">
                    <h3 class="title">Nama Gambar</h3>
                    <span class="post">Keterangan Gambar</span>
                </div>
                <ul class="icon">
                    <li><a href="#"><i class="fa fa-search"></i></a></li>
                    <li><a href="#"><i class="fa fa-link"></i></a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="box">
                <img src="images/img-2.jpg">
                <div class="box-content">
                    <h3 class="title">Nama Gambar</h3>
                    <span class="post">Keterangan Gambar</span>
                </div>
                <ul class="icon">
                    <li><a href="#"><i class="fa fa-search"></i></a></li>
                    <li><a href="#"><i class="fa fa-link"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

Setelah membuat HTML  selanjutnya mengatur CSSnya dan menambahkan kelas khusus dengan gaya efek yang diinginkan. 
.box{
    font-family: 'Kanit', sans-serif;
    text-align: center;
    border: 10px solid #fff;
    box-shadow: 1px 1px 2px #e6e6e6;
    overflow: hidden;
    position: relative;
}
.box:hover{ box-shadow: 13px 13px 15px rgba(0, 0, 0, 0.3); }
.box:before{
    content: "";
    background: linear-gradient(to left top,#11998e,#38ef7d);
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.4s linear;
}
.box:hover:before{ opacity: 1; }
.box img{
    width: 100%;
    height: auto;
    transition: all 0.4s linear;
}
.box:hover img{
    opacity: 0;
    transform: scale(3);
}
.box .box-content{
    color: #fff;
    width: 100%;
    transform: translateY(-50%) scale(0);
    position: absolute;
    top: 50%;
    left: 0;
    transition: all 0.4s linear;
}
.box:hover .box-content{ transform: translateY(-50%) scale(1); }
.box .title{
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}
.box .post{
    font-size: 16px;
    text-transform: capitalize;
}
.box .icon{
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    right: 8px;
    bottom: 10px;
}
.box .icon li{
    display: inline-block;
    margin: 0 1px;
    opacity: 0;
    transform: scale(1.3);
    transition: all 0.3s ease 0.4s;
}
.box:hover .icon li{
    opacity: 1;
    transform: scale(1);
}
.box:hover .icon li:nth-child(2){ transition: all 0.3s ease 0.2s; }
.box .icon li a{
    color: #11998e;
    background: #fff;
    font-size: 16px;
    line-height: 33px;
    height: 33px;
    width: 33px;
    border-radius: 50%;
    display: block;
    transition: all 0.5s ease;
}
.box .icon li  a:hover{
    color: #fff;
    background-color: #11998e;
    box-shadow: 0 0 5px #000;
}
@media only screen and (max-width:990px){
    .box { margin: 0 0 30px; }
}

Source Code Lengkapnya

<html>
<style>
    .box{
    font-family: ‘Kanit’, sans-serif;
    text-align: center;
    border: 10px solid #fff;
    box-shadow: 1px 1px 2px #e6e6e6;
    overflow: hidden;
    position: relative;
}
.box:hover{ box-shadow: 13px 13px 15px rgba(0, 0, 0, 0.3); }
.box:before{
    content: “”;
    background: linear-gradient(to left top,#11998e,#38ef7d);
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.4s linear;
}
.box:hover:before{ opacity: 1; }
.box img{
    width: 100%;
    height: auto;
    transition: all 0.4s linear;
}
.box:hover img{
    opacity: 0;
    transform: scale(3);
}
.box .box-content{
    color: #fff;
    width: 100%;
    transform: translateY(-50%) scale(0);
    position: absolute;
    top: 50%;
    left: 0;
    transition: all 0.4s linear;
}
.box:hover .box-content{ transform: translateY(-50%) scale(1); }
.box .title{
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}
.box .post{
    font-size: 16px;
    text-transform: capitalize;
}
.box .icon{
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    right: 8px;
    bottom: 10px;
}
.box .icon li{
    display: inline-block;
    margin: 0 1px;
    opacity: 0;
    transform: scale(1.3);
    transition: all 0.3s ease 0.4s;
}
.box:hover .icon li{
    opacity: 1;
    transform: scale(1);
}
.box:hover .icon li:nth-child(2){ transition: all 0.3s ease 0.2s; }
.box .icon li a{
    color: #11998e;
    background: #fff;
    font-size: 16px;
    line-height: 33px;
    height: 33px;
    width: 33px;
    border-radius: 50%;
    display: block;
    transition: all 0.5s ease;
}
.box .icon li  a:hover{
    color: #fff;
    background-color: #11998e;
    box-shadow: 0 0 5px #000;
}
@media only screen and (max-width:990px){
    .box { margin: 0 0 30px; }
}
    </style>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-md-4 col-sm-6″>
<div class=”box”>
<img src=”https://1.bp.blogspot.com/-dIPSN5LDAhQ/XoQHrzDLI6I/AAAAAAAAJsc/gFD8Pw-kIFUTzSpfEirlePnVwpfFzLjagCLcBGAsYHQ/s640/Belajar%2BHTML5%2BDan%2BCanvas%2BMemembuat%2BEfek%2BAnimasi%2BHue%2BBall%2BBerbagai%2BWarna.png” />
<div class=”box-content”>
<h3 class=”title”>
LABKOM99</h3>
<span class=”post”>Web Designer</span>
</div>
<ul class=”icon”>
<li><a href=”https://labkom99.com”><i class=”fa fa-search”></i></a></li>
<li><a href=”https://labkom99.com”><i class=”fa fa-link”></i></a></li>
</ul>
</div>
</div>
<div class=”col-md-4 col-sm-6″>
<div class=”box”>
<img src=”https://1.bp.blogspot.com/-V0WYwuqmsYE/XoM3fVlEwCI/AAAAAAAAJsM/PVRpq4PsADwd747gKqYnHPDkXVhXjjD7gCLcBGAsYHQ/s640/Belajar%2BHTML5%2BDan%2BCanvas%2BMembuat%2BBola%2BApi%2BLuncur.png” />
<div class=”box-content”>
<h3 class=”title”>
LABKOM99</h3>
<span class=”post”>Web Developer</span>
</div>
<ul class=”icon”>
<li><a href=”https://labkom99.com”><i class=”fa fa-search”></i></a></li>
<li><a href=”https://labkom99.com”><i class=”fa fa-link”></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

Demo

LABKOM99

Web Designer

LABKOM99

Web Developer

labkom99
Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball Berbagai WarnaMengapa Jurusan Komputer Begitu Populer Sekarang? Ini Mungkin Jawaban Paling Realistis Yang Pernah Saya Lihat!

Leave a Reply

labkom99

Labkom99 merupakan salah satu situs yang diperuntukkan menambah pengetahuan gratis tentang pemrograman, Akun Sosial, Google Update, Pembaruan Windows, Mac dan Banyak Lagi !!!

11 months ago HTML0
Skip to toolbar