How to transform image size on mouse hover without affecting the layout in CSS

Topic: HTML / CSS« Prev|Next »

Answer: Use the CSS transform property

You can use the CSS transform property to increase or decrease the image size on mouse hover without affecting the surrounding elements or content.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>CSS3 Image Transform Gallery</title>
  • <style type="text/css">
  •     ul {
  •         margin: 50px;
  •         list-style: none;
  •     }
  •     ul li {
  •         margin: 10px;
  •         display: inline-block;
  •     }
  •     ul li a {
  •         padding: 5px;
  •         display: inline-block;      
  •         border: 1px solid #f2f2f2;
  •     }
  •     ul li a img {
  •         width: 125px;
  •         height: 125px;
  •         display: block;
  •     }
  •     ul li a:hover img {
  •         transform: scale(1.5);
  •         box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  •     }
  • </style>
  • </head>
  • <body>
  •     <ul>
  •         <li><a href="#"><img src="club.jpg" alt="Club Card"></a></li>
  •         <li><a href="#"><img src="diamond.jpg" alt="Diamond Card"></a></li>
  •         <li><a href="#"><img src="spade.jpg" alt="Spade Card"></a></li>
  •         <li><a href="#"><img src="heart.jpg" alt="Heart Card"></a></li>
  •     </ul>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.