Belajar HTML Dan CSS3 Membuat Mouseover Zoom Dan Efek Thumbnail

by -27 views
Belajar HTML Dan CSS3 Membuat Mouseover Zoom Dan Efek Thumbnail

Labkom99.com – Mouseover zoom dan membuat 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 Membuat Efek Thumbnail

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 Efek Thumbnail

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

About Author: labkom99

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

Leave a Reply

Your email address will not be published. Required fields are marked *