1. Home
  2. Customization
  3. Elegant hover effect for your image thumbnails

Elegant hover effect for your image thumbnails


Today I have prepared a new hover effect – this one is also based on the feedback from other SmugMug users.

This effect will allow you to display the TITLE and CAPTION in the middle of the thumbnail, over a semi transparent background – with buy and download icons at the bottom.

SmugMug - custom hover effect for your gallery thumbnails


This effect works on all gallery styles except JOURNAL and SMUGMUG.

You can preview this effect here


Gallery Preparation

Open one of your galleries and then click CUSTOMIZE → GALLERY STYLE and pick your favourite gallery style THUMBNAILS, COLLAGE LANDSCAPE or COLLAGE PORTRAIT. Once you have picked your favourite gallery style click one more time CUSTOMIZE → CONTENT AND DESIGN – which will open the CUSTOMIZATION mode.  Hover your cursor over the gallery and click the wrench icon → from the list choose your gallery style and click on it, this will activate a small popup window where you will need to make a few important changes:

SmugMug Gallery Style settings window

Here are the options that you will need to change:


The rest of the options can be set as you like, because they will not affect the customization.


CSS Code

Now add a CSS content block to your page and then add this code to it:

I have added loads of notes to the code, which will help you modify the look of the hover effect.

Now you just need to publish your changes and that is it :}


Additional Tweaks

You can also add a nice separator – a line that separates the caption and title as you can see on the demo page.

Custom Separator

Just open the same CSS content block that holds previous { above } code and then add this code below the code that you already  have in this content block:


Updated on January 21, 2017

Was this article helpful?

Related Articles


  1. I love this but I am trying to get this to work on a single photo content block so that I can link a picture to a certain page, any chance you could give me a hand? love all the customizations, your site looks amazing

Leave a Comment

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