Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

danielhaydenh

Member
  • Posts

    4
  • Joined

  • Last visited

Posts posted by danielhaydenh

  1. On 6/19/2020 at 9:35 AM, jpeter said:

    @Falconer You can try adding the CSS below to the page

    
    .gallery-caption-grid-masonry {
      opacity: 0;
      z-index: -1;
      transition: all .2s;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      text-align: center;
      color: #fff;
      height: 100%;
      padding: 0;
    }
    
    
    .gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before {
      background-color: rgba(0, 0, 0, 0.4);
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 999;
      opacity: 0;
      transition: all .5s;
    }
    
    .gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry {
      z-index: 0;
      opacity: 1;
      height: auto;
    }
    
    .gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry {
      z-index: 0;
      opacity: 1;
    }
    
    
    .gallery-masonry-item:hover .gallery-caption-grid-masonry:before {
      opacity: 1;
      transition: all .5s;
    }
    
    .gallery-caption-grid-masonry .gallery-caption-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .gallery-caption-grid-masonry p.gallery-caption-content {
      z-index: 1000;
      font-size: 1.3rem;
    }

    This will add the following effect:

     

    @jpeter ive used this code and it works great but when the image has a link attached to it it removed the colour overlay. do you know of how to adjust this?

  2. Site URL: https://dhaydendesign.com/portfolio-test

    I'm trying to add custom css to my site to allow the captions to show on hover over, however when the image has a clickthrough link attached to it the code isn't behaving.

    Can someone advise me please.

    Below is the code i have used.

    .gallery-caption-grid-masonry {
      opacity: 0;
      z-index: -1;
      transition: all .2s;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      text-align: center;
      color: #fff;
      height: 100%;
      padding: 0;
    }
      
    .gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before {
      background-color: #0c3448;
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 999;
      opacity: .8;
      transition: all .2s;
    }

    .gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry {
      z-index: 0;
      opacity: 1;
      height: auto;
    }

    .gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry {
      z-index: 0;
      opacity: .9;
    }

    .gallery-masonry-item:hover .gallery-caption-grid-masonry:before {
      opacity: 1;
      transition: all .3s;
    }

    .gallery-caption-grid-masonry .gallery-caption-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gallery-caption-grid-masonry p.gallery-caption-content {
      z-index: 1000;
      font-size: 1.9rem;
    }

×
×
  • Create New...