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;
}
CSSAdditional 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;
}
CSSThe 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.
Related articles
Comments (2)
Leave a Reply Cancel reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Support me
I am writing this portal in my free time and I pay for it myself. So, if you want to support my work – use this button to buy me a coffee 🙂 Which will help towards the hosting costs of the portal.
Hi Tom,
What tweaks need to be made to the css to get this effect to work with COLLAGE – LANDSCAPE galleries?
Hey Catherine – here you go:
/*Adding hover effect to Collage Landscape gallery style – thumbnails*/
.sm-tiles-row-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;
}