Make Thumbnails Transparent on Hover - Aaron Meyers

Make Gallery/Folder Thumbnails Transparent on Hover

SmugMug, by default, offers several options for the action that takes place when a viewer places their mouse over a gallery or folder thumbnail: It can display the title, it can hide the title, or it can do nothing. I don't like any of these options. The title should always be displayed and some other form of feedback should be given to the user to let them know which thumbnail they are hovering over. In SmugMug layout the thumbnails become slightly transparent when the mouse moves over them. The following code will make a similar transparency occur when the mouse is placed over Gallery or Folder thumbnails. Add the following CSS to your theme's Advanced CSS settings:

/* Make the folder images slightly transparent when the mouse hovers over it */
.sm-user-ui .sm-tiles .sm-tile-content:hover {
  opacity: 0.6;
  /* Have the transparency fade in */
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15 ease-in;
}

/* Fade out the transparency. This code can be removed if you do not want it to fade */
.sm-user-ui .sm-tiles .sm-tile-content {
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15 ease-in;
}

Comments

Powered by SmugMug Log In