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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVe4EFdJO1yL0rUMgEZuKMZdbnls0UZR_rP3Pvwopf0QX6p5Dt6plLl9egMJ5YA9CscY4KHx2EHx3Qa1kjcD9hGIc7sVEgKsTJwLDHW2YBQ1Z89e-i54ZWpg4vgywgILoXyjXplLDIVs5L/s640/Belajar+HTML5+Dan+Canvas+Memembuat+Efek+Animasi+Hue+Ball+Berbagai+Warna.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGs5Fb4-oqBhDQeaHZ7oWcxO2Grzkkm88ruNly2-3AmrKfGH8phpcpxUv_LITVLsDh_uq5QFo846wPp2z2CzPIjS2fTVK7ce4z17e8X-y4-OBzGxC3Fz98c4RwHbQ4ekLGbgTR3mohb2pg/s640/Belajar+HTML5+Dan+Canvas+Membuat+Bola+Api+Luncur.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



Label: