Making the slideshow hover effect cover the full image

Site URL: https://www.maartenrots.nl/slideshow-test

Hi there,

I'm using Brine (Moksha) and want to modify the hover effect on slideshow gallery images. I have found some CSS code that helps me change certain things, but I am not getting to the result I have in mind.

1. I would like the hover effect to cover the full image, instead of just a small area in the center. It will have to remain clickable as it will link to a page on my website.
2. On mobile devices I would like the title and description to appear below the image.

I am testing this on the following page: https://www.maartenrots.nl/slideshow-test

At the moment I am using the following (incomplete) code:

.sqs-block-gallery .sqs-gallery-block-slideshow { 

  .meta .meta-inside {
    background-color: rgb(255, 255, 255,);
  }
  .meta-title {
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 6px 20px;
    color: #042663;
  }

  .meta-description p {
    text-align: center;
    color: #9DB0D8;
    font-size: 12px;
    letter-spacing: 1px;
    padding-top: 4px;
    max-width: 550px;
  }
  .meta-description a:link { 
    color: #9DB0D8;
    text-align: center !important;
  }

  .sqs-gallery-design-stacked-slide:hover {

  }
  @media (max-width : 667px) {
    .meta {
      display: block !important;
      max-width: 70% !important;
      min-width: 70% !important;
      left: 50% !important;
    }
    .meta-title {
      font-size: 12px;
    }
    .meta-description p {
      display: none;
    }
  }
}

I would really appreciate some input, thanks in advance!

Hi. Have you solved this yet?

Hi Tuan.

I have, thanks to your help 🙂
I really appreciate your input, will post the solution I went with for future reference