Beberapa Contoh Efek Hover pada Gambar Part-1

Halo, ketemu lagi dengan saya 🙂 apa kabarnya ? semoga baik yah, amin.

Pada kesempatan kali ini saya akan berbagi referensi mengenai Beberapa Contoh Hover Pada Gambar, bagi kalian yang masih bingung membuat efek hover seperti apa, tidak ada salahnya untuk menyimak Beberapa Contoh Hover Pada Gambar berikut ini.

Silahkan ketikan kode HTML berikut.

<span></span>  <<span></span><span></span>h1>CSS Image Hover Effects<!--<span class="hiddenSpellError" pre="" data-mce-bogus="1"--><span></span><span></span>h1>

    <h2>No Effect</h2>
    <div class="column">
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg"></figure>
            <span>Hover</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg"></figure>
            <span>Hover</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg"></figure>
            <span>Hover</span>
        </div>
    </div>

    <h2 id="demo01">1. Zoom In #1</h2>
    <div class="hover01 column">
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg"></figure>
            <span>Hover</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg"></figure>
            <span>Hover</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg"></figure>
            <span>Hover</span>
        </div>
    </div>

    <h2 id="demo02">2. Zoom In #2</h2>
    <div class="hover02 column">
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg"></figure>
            <span>Hover</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg"></figure>
            <span>Hover</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg"></figure>
            <span>Hover</span>
        </div>
    </div>

    <h2 id="demo03">3. Zoom Out #1</h2>
    <div class="hover03 column">
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg"></figure>
            <span>Hover</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg"></figure>
            <span>Hover</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg"></figure>
            <span>Hover</span>
        </div>
    </div>

    <h2 id="demo04">4. Zoom Out #2</h2>
    <div class="hover04 column">
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg"></figure>
            <span>Hover</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg"></figure>
            <span>Hover</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg"></figure>
            <span>Hover</span>
        </div>
    </div>

    <h2 id="demo05">5. Slide</h2>
    <div class="hover05 column">
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg"></figure>
            <span>Hover</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg"></figure>
            <span>Hover</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg"></figure>
            <span>Hover</span>
        </div>
    </div>

    <h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2>
    <div class="hover06 column">
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg"></figure>
            <span>Hover</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg"></figure>
            <span>Hover</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg"></figure>
            <span>Hover</span>
        </div>
    </div>

Kalo sudah, sekarang kita akan buat efek hover pada gambar, silahkan ketikan kode CSS berikut.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
body {
    color: #333;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
h1,
h1+p {
    margin: 30px 15px 0;
    font-weight: 300;
}
h1+p a {
    color: #333;
}
h1+p a:hover {
    text-decoration: none;
}
h2 {
    margin: 60px 15px 0;
    padding: 0;
    font-weight: 300;
}
h2 span {
    margin-left: 1em;
    color: #aaa;
    font-size: 85%;
}
.column {
    margin: 15px 15px 0;
    padding: 0;
}
.column:last-child {
    padding-bottom: 60px;
}
.column::after {
    content: '';
    clear: both;
    display: block;
}
.column div {
    position: relative;
    float: left;
    width: 300px;
    height: 200px;
    margin: 0 0 0 25px;
    padding: 0;
}
.column div:first-child {
    margin-left: 0;
}
.column div span {
    position: absolute;
    bottom: -20px;
    left: 0;
    z-index: -1;
    display: block;
    width: 300px;
    margin: 0;
    padding: 0;
    color: #444;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    opacity: 0;
}
figure {
    width: 300px;
    height: 200px;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}
figure:hover+span {
    bottom: -36px;
    opacity: 1;
}



/* Zoom In #1 */
.hover01 figure img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover01 figure:hover img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

/* Zoom In #2 */
.hover02 figure img {
    width: 300px;
    height: auto;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover02 figure:hover img {
    width: 350px;
}

/* Zoom Out #1 */
.hover03 figure img {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover03 figure:hover img {
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* Zoom Out #2 */
.hover04 figure img {
    width: 400px;
    height: auto;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover04 figure:hover img {
    width: 300px;
}

/* Slide */
.hover05 figure img {
    margin-left: 30px;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover05 figure:hover img {
    margin-left: 0;
}

/* Rotate */
.hover06 figure img {
    -webkit-transform: rotate(15deg) scale(1.4);
    transform: rotate(15deg) scale(1.4);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover06 figure:hover img {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
}

Kalo sudah jangan lupa disimpan, kemudian jalankan dibrowsernya masing-masing dan lihat hasilnya.

Baik itu tadi beberapa contoh efek hover pada gambar yang bisa kalian gunakan, sampai disini artikel mengenai Beberapa Contoh Hover Pada Gambar, semoga bermanfaat, amin.

DEMO