Found what you have been looking for?

Search
Generic filters
Exact matches only
Filter by Categories
Customization
Domains
Lightroom Plugin
Tools and Tips

Adding a simple hover effect to your thumbnails in COLLAGE PORTRAIT gallery style

You can add an elegant hover effect to your thumbnails.  This tutorial is only for COLLAGE PORTRAIT gallery style – but it can be adjusted so it works on any gallery style.  If you are interested in this effect – but for a different gallery style – just let me know about this in the comments section below.

Before you add the code to your gallery – you have to prepare your gallery.  First you will need to change the gallery style of your gallery to COLLAGE PORTRAIT.  You can do this by logging into your SmugMug account → open a gallery of your choice → click CUSTOMIZE → GALLERY STYLE → choose COLLAGE PORTRAIT.

Once your thumbnails are displayed in collage portrait gallery style – you will need to hide captions for that ‘clean look.’

Just click CUSTOMIZE → CONTENT AND DESIGN → hover your cursor over the gallery thumbnails and click the wrench icon → this will open a small popup window → choose your gallery style { COLLAGE PORTRAIT } → here make sure that INFO STYLE is turned off– exactly as on my screenshot:

Now click DONE – but do not publish your changes, because you will need to add a CSS content block to your gallery/galleries.

CSS Code

You will need to add a CSS content block to your gallery or the ALL GALLERIES section if you would like to affect all galleries with this code.  Then add this code to it:

/*Adding hover effect to Collage Portrait gallery style - thumbnails*/
.sm-tiles-column-organic .sm-tile-content:hover {
  opacity: .4 !important; /*You can change the numeric value to make the image more or less visible on hover*/
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

Additional Code

You can change the colour of the hover background using this short CSS code, which you can add to the same CSS content block:

/*Changing the hover background color*/
.sm-gallery .sm-tile { 
    background-color: #ffffff !important;
}

The above code will work great if your site is dark and you want to have a white background appearing behind the image on hover.  Exactly as presented on the demo video at the top of the page.

You can change the HEX color value to any color of your choice.

collage portrait, gallery style, hover, thumbnails


Tomasz Nowicki

My name is Tomasz Nowicki and I am a PHOTOGRAPHER and WEB DESIGNER based in the UK. Few years ago I have created my first website using SmugMug - a powerful platform for any type of photographer. I fell in love with it and from day one I have started exploring the possibilities of customizing my website. PHOTOM Portal is a my personal SmugMug knowledge base website where you can find some tips and tricks on how to use and get the most out of your SmugMug website.

Leave a Reply

Your email address will not be published. Required fields are marked *

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