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.

Gallery Preparation

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.