html tutorial - How to transform image size on mouse hover without affecting the layout in CSS - html5 - html code - html form



Answer: Use the CSS transform property

    You can use the CSS transform property to extend or decrease the image size on mouse hover while not affecting the surrounding components or content.

    Example

      <!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: 150px;
              height: 150px;
              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 Searches to How to transform image size on mouse hover without affecting the layout in CSS