Image hover effect using custom CSS

Updated on ... 10th February 2023

In our previous tutorial, we have seen Service displaying with icon hover effect In this tutorial, we are going to create more image hover effects in various types.

Tree directory structure script With PHP

In this tutorial, we are creating all these effects in CSS by changing the hover property. we will see multiple most usable CSS hover effects.

For example:

Image zoom and rotate effect
Image fade Effect
Grayscale effect
Image zoom effect

Let's start creating an HTML page and paste the below code.

                                                
                                                
                                                <section>
    <div class="c_container hover_04">
        <h2>Image zoom and rotate effect:</h2>
        <div class="img_outer">
            <img class="fadding-photo" src="https://picsum.photos/id/244/200/200" />
        </div>
        <div class="img_outer">
            <img class="fadding-photo" src="https://picsum.photos/id/249/200/200" />
        </div>
        <div class="img_outer">
            <img class="fadding-photo" src="https://picsum.photos/id/248/200/200" />
        </div>


    </div>
</section>

<section>


    <div class="c_container hover_01">
        <h2>Fade Effect :</h2>
        <img class="thumb_photo" src="https://picsum.photos/id/238/200/200" />
        <img class="thumb_photo" src="https://picsum.photos/id/239/200/200" />
        <img class="thumb_photo" src="https://picsum.photos/id/240/200/200" />
    </div>

</section>

<section>
    <div class="c_container hover_02">
        <h2>Grayscale effect:</h2>
        <img class="thumb_photo" src="https://picsum.photos/id/1002/200/200" />
        <img class="thumb_photo" src="https://picsum.photos/id/1013/200/200" />
        <img class="thumb_photo" src="https://picsum.photos/id/1018/200/200" />
    </div>

</section>
<section>
    <div class="c_container hover_03">
        <h2>Image zoom effect:</h2>
        <img class="thumb_photo" src="https://picsum.photos/id/244/200/200" />
        <img class="thumb_photo" src="https://picsum.photos/id/249/200/200" />
        <img class="thumb_photo" src="https://picsum.photos/id/248/200/200" />
    </div>

</section>

Now we will use our custom CSS on the above page.

                                                
                                                
                                                * {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
}

section {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

section .c_container {
    width: 100%;
    max-width: 1024px;
}

section .c_container img {
    transition: all .3s;
}

section .c_container .thumb_photo {
    width: 31%;
    max-width: 100%;
    padding: 1%;
}

section .c_container .img_outer {
    width: 31%;
    max-width: 100%;
    padding: 1%;
    float: left;
    overflow: hidden;

}

section .c_container .img_outer img {
    width: 100%;
}

section .c_container .img_outer {
    width: 31%;
    max-width: 100%;
    padding: 1%;
    transition: all .3s;
    float: left;
}

section .hover_01 img:hover {
    opacity: 0.4;
}

section .hover_02 img:hover {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

section .hover_03 img:hover {
    transform: scale(1.1);
}

section .hover_04 img:hover {
    transform: scale(1.3) rotate(10deg);
}