Tutorial: Hover Effect on Galleries and Folders

Hikin' Mike · February 16, 2019

https://gallery.imagesinthebackcountry.com/Smugmug-customization/Hover-Effect-on-Galleries-Folders

MarcQuinlivan · February 23, 2019

Thanks @Hikin' Mike - that looks pretty cool. Definitely one to try out with maybe a couple of tweaks to fit in with my sites.

MarcQuinlivan · February 23, 2019

@Hikin' Mike I have taken your code and adapted it for "Collage Landscape" with "Bottom Bar" for the info display.

See example here: https://www.marcquinlivan.photography/Karting/Driver-Galleries/Eimear-Carey/2018

/**
* 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;
}

/* set white border lines */
.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);
}

/* set white border lines */
.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);
}

/* set white border lines top\bottom */
.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);
}

/* set white border lines sides */
.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-tile:hover .sm-image,
.sm-page-widget-galleries .sm-tile:hover .sm-image {opacity: .15;}

/* set position of hover text */
.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-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:hover .sm-tile-info,
.sm-user-ui .sm-page-widget-folders .sm-tile:hover .sm-tile-title a,
.sm-user-ui .sm-page-widget-galleries .sm-tile:hover .sm-tile-info,
.sm-user-ui .sm-page-widget-galleries .sm-tile:hover .sm-tile-title a {text-align:center;width:90%;height:95%;background-color: unset;color: white;}

/* End Custom Folder and Gallery Test Overlay */

Anybody who wishes to change the colour of the border bars can choose a colour here:

    .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: red}

Hikin' Mike · February 23, 2019

Nice work @MarcQuinlivan

Tutorial: Hover Effect on Galleries and Folders

Comments