Found what you have been looking for?

Search
Generic filters
Exact matches only

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.

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

Open one of your galleries and then click CUSTOMIZE → GALLERY STYLE and pick your favourite gallery style THUMBNAILSCOLLAGE 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:

Here are the options that you will need to change:

  • INFO STYLE: BOTTOM BAR
  • INFO TEXT ALIGNMENT: CENTER
  • INFO HOVER: SHOW
  • BUY BUTTON COLOR: DEFAULT
  • BUY BUTTON STYLE: ICON

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:

/****Cool hover effect for your image thumbnails - https://portal.photom.me****/
.sm-tile-info {
  height: 100%;
}

.sm-gallery .sm-tile-info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
  background-color: rgba(255, 255, 255, 0.95) !important;  /*This part of code allow you to change the hover background colour - at the moment it is set to white*/
  
}

.sm-tile-info .sm-gallery-image-tools {
  bottom: 5%; 
  position: absolute;
}

/*This code will allow you to chnage the TITLE font */
.sm-tile-title {
  font-size: 24px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #000000;
  margin-bottom: 8px;
}

/*This code will allow you to chnage the CAPTION font */
.sm-tile-caption {
  font-size: 16px !important;
  line-height: 1.5em !important;
  letter-spacing: 0px;
  color: #2a2a2a;
}

/*With this code you can change the colour of the bottom icons - download and shopping cart*/
.sm-gallery-image-tools .sm-button-nochrome>.sm-button-fonticon{
  color: #000000 !important;
}

/*With this code you can change the colour of the bottom icons - download and shopping cart - when someone hovers over one of them*/
.sm-gallery-image-tools .sm-button-nochrome>.sm-button-fonticon:hover {
  color: #ff0000 !important;
}

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.

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:

/*Separator between title and caption*/
.sm-tile-info .sm-tile-title:after {
  content: "";
  display: block;
  text-align: center;
  border-bottom: 1px solid #000; /*Here you can specify the colour of the line*/
  margin-right: 15% !important;  /*Here you can specify the margin between the right side of the thumbnail and the line*/
  margin-left: 15% !important;  /*Here you can specify the margin between the left side of the thumbnail and the line*/
  margin-top: 10px;
  margin-bottom: 5px;
}

hover effect, 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.