Hover Effect on Galleries and Folders - Mike Matenkosky

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.

Galleries

Folders

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.

CSS


/**
* Custom Images and Titles on 
* Galleries and 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: -webkit-transform ease-out 250ms;
  transition: transform ease-out 250ms;
  transition: transform ease-out 250ms, -webkit-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;
  -webkit-transform: scale(0, 1);
          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;
  -webkit-transform: scale(1, 0);
          transform: scale(1, 0);
}

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

.sm-page-widget-folders .sm-tile > a:hover::after,
.sm-page-widget-galleries .sm-tile > a:hover::after {
  -webkit-transform: scale(1, 1.05);
          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%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: opacity ease-out 250ms;
          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;}

Powered by SmugMug Log In