1. Home
  2. Customization
  3. Creating a cool thumbnail zoom hover effect

Creating a cool thumbnail zoom hover effect


In this short tutorial I am going to show you how to create a smooth as a butter zoom hover effect, which you can use on your thumbnails.  You can see this effect on my SmugMug website – here.  Just open my homepage and scroll down until you see the thumbnails – hover your mouse over them to see the effect.


This effect works best on THUMBNAIL, COLLAGE PORTRAIT, SMUGMUG and JOURNAL gallery styles.  Although this effect works on COLLAGE LANDSCAPE gallery styles – I recommend to remove the drop shadow effect from the code – otherwise the shadow will look odd.

This effect will also work on thumbnails in MULTIPLE PHOTOS content block.


The CSS code

If you would like to apply this code to the whole site on your SmugMug account { like I did on my website }, just log in to your SmugMug account → click CUSTOMIZE on the right side → CONTENT AND DESIGN → on the right side select ENTIRE SITE → add a CSS content block to it and then add this code to it:

/*Cool Zoom hover effect from portal.photom.me*/

.sm-user-ui .sm-tile-content:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.20);

.sm-user-ui .sm-tile-content {
    -webkit-transition: -webkit-transform .5s ease;
    transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    transition: transform .5s ease, -webkit-transform .5s ease;






Updated on May 9, 2018

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.