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.

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.

Support this PORTAL

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.