Css Zoom On Hover | Css Image Zoom In On Hover – Codewithrandom

Css Zoom On Hover | Css Image Zoom In On Hover


Learners, In this article we are going to look at an awesome property of CSS that is the zoom hover effect.

These are CSS properties that we apply to the content for our web pages directly it didn’t show any effect but when any users interact with the webpages then it gives better user interactiveness.

So, without making it lengthier let’s jump into the project 😉.


Hey learners..!


Welcome to our 🎊 today’s blog with code with random. In this blog, we gonna learn how we can design a CSS Zoom On hover, especially Using HTML CSS.


I hope you must have got an idea about the project.


Let’s have a look at our project.
 

Css Zoom On Hover | Css Image Zoom In On Hover - Codewithrandom

Here the project may seem static, no doubt it is in the starting but when you will hover over it the image will zoom out.

HTML SECTION 

Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.


We have the following part in the HTML section.
  • First, we have a container in which we have two images first one is as logo and the second one is an actual image.
Go through the below code 👇 and run it in your IDE or where you used to design just HTML without CSS styling.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta name="viewport" content="width=device-width, initial-scale=1" />  
  </head>  
  <body>  
   <div class="container">  
    <div class="game-box">  
     <img  
      src="https://www.crytek.com/frontend/cb5dff024714b98663acd7ef5ef14e8b.jpg"  
      alt=""  
      class="game_box-game-cover"  
     />  
     <img  
      src="https://www.crytek.com/frontend/94def872c5a1ec487b1a258707b220e0.png"  
      alt=""  
      class="game_box-game-logo"  
     />  
    </div>  
   </div>  
  </body>  
 </html>

CSS SECTION 

By CSS only our main task is going to perform so let’s have an understanding of what we are doing in the code part. 
  • We will design our container and bring it to the center and will set both images with respective dimensions.
  • And most important we will set our zoom hover property to the image.

The Below code will analyze you more👇. So just add in your HTML half complete file and wait to watch some magic.
  * {  
     box-sizing: border-box;  
    }  
 body {  
     background-color: #eeeeee;  
    }  
    .container {  
     position: relative;  
     width: 50%;  
     max-width: 300px;  
     margin-top: 50px;  
     margin-left:450px;  
    }  
    .image {  
     display: block;  
     width: 80%;  
     height: auto;  
    }  
    .game_box-game-logo {  
     position: absolute;  
     bottom: 0;  
     color: white;  
     width: 100%;  
     transition: .25s ease;  
     color: white;  
     font-size: 20px;  
     padding: 20px 40px 20px 40px;  
     text-align: center;  
    }  
    img {  
     border-style: none;  
     display: block;  
     max-width: 100%;  
     border-radius: 5px;  
    }  
    .game-box:hover .game_box-game-cover {  
     box-shadow: 0 5px 5px -15px rgba(1, 19, 53, 0.3),  
      0 10px 10px -15px rgba(1, 19, 53, 0.3),  
      0 20px 20px -15px rgba(1, 19, 53, 0.3),  
      0 40px 40px -15px rgba(1, 19, 53, 0.3),  
      0 50px 50px -20px rgba(1, 19, 53, 0.3),  
      0 70px 70px -25px rgba(1, 19, 53, 0.3);  
     transition: .25s ease;  
    }  
    .game-box:hover {  
     -ms-transform: scale(1.02);  
     -webkit-transform: scale(1.02);  
     transform: scale(1.02);  
     transition: 0.25s ease;  
    }  
    .game-box:hover .game_box-game-logo {  
     -ms-transform: scale(1.02);  
     -webkit-transform: scale(1.02);  
     transform: scale(1.02);  
     width: 100%;  
     padding: 20px 40px 15px 40px;  
     max-width: 100%;  
    }  
    game-box-link {  
     outline-width: 0;  
    }
FOR a live preview refer to this attached codepen link:-
 

See the Pen CSS Zoom image on hover by Birol AYDIN (@BirolAyd) on CodePen.

FOR a live preview refer to this attached project video:-



By this blog… We have learned how we can design a Gradient border property Using HTML CSS.

Now I’m looking for your reviews.
So, How was the blog 😁, Learners!

If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.😊

I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.

You can follow me on Instagram 

Written by @Ankit kumar
 
Code by bibby0912


Leave a Reply