A Cool Hover Effect on Galleries and Folders

This is a cool little customize I came accross this codepen a few months ago and decided to adapt it for use on SmugMug. The "cool" part happens when you hover over on of the images.


There are two settings that must be set for this to work. The Basic Layout must be 'Collage Landscape' and the Display must be 'Info Style > Under'.

Galleries Basic Galleries Display

You can set the other settings to suit your needs. Next, copy the following code into a CSS block or your Theme's Custom CSS section. Depending on your theme colors, you may need to edit the colors.


* Cool Hover Effect on Galleries & Folders
.sm-page-widget-folders .sm-tile,
.sm-page-widget-galleries .sm-tile {position: relative;}

.sm-page-widget-folders .sm-tile > a::before,
.sm-page-widget-folders .sm-tile > a::after,
.sm-page-widget-galleries .sm-tile > a::before,
.sm-page-widget-galleries .sm-tile > a::after {
  content: '';
  position: absolute;
  top: 1.25em;
  bottom: 1.25em;
  left: 1.25em;
  right: 1.25em;
  opacity: 1;
  z-index: 1;
  transition: transform ease-out 250ms;

.sm-page-widget-folders .sm-tile > a::before,
.sm-page-widget-galleries .sm-tile > a::before {
  border-top: 1px solid;
  border-bottom: 1px solid;
  transform: scale(0, 1);

.sm-page-widget-folders .sm-tile > a::after,
.sm-page-widget-galleries .sm-tile > a::after {
  border-left: 1px solid;
  border-right: 1px solid;
  transform: scale(1, 0);

.sm-page-widget-folders .sm-tile > a:hover::before,
.sm-page-widget-galleries .sm-tile > a:hover::before {transform: scale(1.05, 1);}

.sm-page-widget-folders .sm-tile > a:hover::after,
.sm-page-widget-galleries .sm-tile > a:hover::after {transform: scale(1, 1.05);}

.sm-page-widget-folders .sm-image,
.sm-page-widget-galleries .sm-image {
  max-width: 100%;
  display: block;
  transition: opacity ease-out 250ms;

.sm-page-widget-folders .sm-tile:hover .sm-image,
.sm-page-widget-galleries .sm-tile:hover .sm-image {opacity: .2;}

.sm-page-widget-folders .sm-tile-info,
.sm-page-widget-galleries .sm-tile-info {
  position: absolute;
  bottom: 0px;
  left: 20px;

.sm-page-widget-folders .sm-tile:hover .sm-tile-info,
.sm-page-widget-galleries .sm-tile:hover .sm-tile-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity ease-out 250ms;

/* Colors */
.sm-user-ui .sm-page-widget-folders .sm-tiles .sm-tile-content,
.sm-user-ui .sm-page-widget-galleries .sm-tiles .sm-tile-content {background: rgba( 0, 0, 0, 0.8 );}

.sm-page-widget-folders .sm-tile > a::before,
.sm-page-widget-folders .sm-tile > a::after,
.sm-page-widget-galleries .sm-tile > a::before,
.sm-page-widget-galleries .sm-tile > a::after {border-color: white;}

.sm-user-ui .sm-page-widget-folders .sm-tile .sm-tile-info,
.sm-user-ui .sm-page-widget-folders .sm-tile .sm-tile-title a,
.sm-user-ui .sm-page-widget-galleries .sm-tile .sm-tile-info,
.sm-user-ui .sm-page-widget-galleries .sm-tile .sm-tile-title a {color: white;}
/* Cool Hover Effect on Galleries & Folders End */

Powered by SmugMug Owner Log In