How to Zoom an Image on Mouse Hover using CSS

 

In this tutorial we will learn how to zoom an image on mouse hover using CSS. This type of effect is basically used in portfolio or any type of sites.


We can zoom image on mouse hover by two possible ways :-

Using CSS

Using JavaScript

 

In this article we will use two section of  code. First section of code contain HTML code and second section of code contain CSS code.

 

HTML code

In the first section, we will use HTML code to create basic structure to perform image zoom on hover effect.

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Zoom an Image on Mouse Hover using CSS </title>

</head>

<body>

    <div class="teknowize">

        <img src="https://scontent.fpat3-3.fna.fbcdn.net/v/t1.6435-9/173435656_100553882178512_5067283647022573909_n.png?_nc_cat=106&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=YI-DPfxix60AX_04-6p&_nc_oc=AQm4t1zTSXcQOtWsECWg1b54FYG-yKvts0yit49eZyz7CE2XfRIVi4R4ohi89BeAmD8&tn=8lmRwSjEcX7Ytb8g&_nc_ht=scontent.fpat3-3.fna&oh=aeb0e2f0e59fb3efc1c038d45cb9ba6a&oe=61C06B91" alt="teknowize Image" />

    </div>

</body>

</html> 


CSS code

In the second section, we will use CSS code to perform image zoom on hover effect. Here we will use transform and transition cascading style sheet property.

 <style>

    .teknowize {

        margin: 0 auto;

        width: 300px;

        height: 300px;

        overflow: hidden;

    }

    .teknowize img {

        width: 100%;

        transition: 0.5s all ease-in-out;

    }

    .teknowize:hover img {

        transform: scale(1.5);

    }

</style> 


Now we will combine both the HTML and CSS section to perform Zoom an Image on Mouse Hover using CSS

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Zoom an Image on Mouse Hover using CSS </title>

    <style>

    .teknowize {

        margin: 0 auto;

        width: 300px;

        height: 300px;

        overflow: hidden;

    }

    .teknowize img {

        width: 100%;

        transition: 0.5s all ease-in-out;

    }

    .teknowize:hover img {

        transform: scale(1.5);

    }

</style>

</head>

<body>

  <div class="teknowize">

    <img src="https://scontent.fpat3-3.fna.fbcdn.net/v/t1.6435-9/173435656_100553882178512_5067283647022573909_n.png?_nc_cat=106&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=YI-DPfxix60AX_04-6p&_nc_oc=AQm4t1zTSXcQOtWsECWg1b54FYG-yKvts0yit49eZyz7CE2XfRIVi4R4ohi89BeAmD8&tn=8lmRwSjEcX7Ytb8g&_nc_ht=scontent.fpat3-3.fna&oh=aeb0e2f0e59fb3efc1c038d45cb9ba6a&oe=61C06B91" alt="teknowize Image" />

  </div>

</body>

</html>

 


Output

Before hover

 


After hover



Related Topics