Creating a Zoom Effect on an image on hover using CSS?

by

What about using CSS3 transform property and use scale which ill give a zoom like effect, this can be done like so,

HTML

<div class="thumbnail">
    <div class="image">
        <img  src="http://placehold.it/320x240" alt="Some awesome text"/>
    </div>
</div>

CSS

.thumbnail {
    width: 320px;
    height: 240px;
}

.image {
    width: 100%;
    height: 100%;    
}

.image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

.image:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

Here’s a demo fiddle. I removed some of the element to make it simpler, you can always add overflow hidden to the .image to hide the overflow of the scaled image.

zoom property only works in IE

More Related Contents:

  1. How to choose between `class` and `id`
  2. Trouble with image
  3. Fill the remaining height or width in a flex container
  4. float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
  5. Why are my CSS3 media queries not working on mobile devices?
  6. How does the “position: sticky;” property work?
  7. Colspan/Rowspan for elements whose display is set to table-cell
  8. How do I install a custom font on an HTML site
  9. What’s a 3D doing in this HTML?
  10. How to create a curve between two gradient using CSS?
  11. How can I fill a div with an image while keeping it proportional?
  12. How do I make the whole area of a list item in my navigation bar, clickable as a link?
  13. How to create a transparent triangle with border using CSS?
  14. Image label for input in a form not clickable in IE11
  15. Default :target with CSS
  16. How to center a (background) image within a div?
  17. Changing the highlight color when selecting text in an HTML text input
  18. Why do my list item bullets overlap floating elements
  19. Css hover sometimes doesn’t work on svg paths
  20. Unwanted border-radius corners around images in Brave/Chrome browser
  21. Progress Bar with HTML and CSS
  22. scrollable?
  23. Bootstrap 3 – show collapsed navigation for all screen sizes
  24. Border around specific rows in a table?
  25. Making a div that covers the entire page
  26. Word wrap a link so it doesn’t overflow its parent div width [duplicate]
  27. How to calc() the number of rows in a grid template?
  28. Is it possible to set a src attribute of an img tag in CSS?
  29. How to fill 100% of remaining height?
  30. How to make a table with equal column widths in CSS?

Leave a Comment