Comments

  • MarcQuinlivanMarcQuinlivan Beginner grinner IrelandPosts: 52Registered Users Big grins

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

  • MarcQuinlivanMarcQuinlivan Beginner grinner IrelandPosts: 52Registered Users Big grins

    @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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,369Registered Users Major grins
Sign In or Register to comment.