HTML & CSS Masonry Gallery Hover CSS Issue

[LFlo]

I have a great masonry gallery code but needed to add a hover affect that links out that is already coded on the site...only problem is when I add an <a link out it interrupts one css line that I just can’t seem to figure out how to make work! Thanks in advance for ANY assistance on this!

This is the Gallery CSS. The Second Line .grid-wrapper > div > img { is what gets messed up:

/*-------------------MASONRY GALLERY CSS--------------------*/

.grid-wrapper > div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.grid-wrapper > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.grid-wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 300px;
  grid-auto-flow: dense;
}
.grid-wrapper .wide {
  grid-column: span 2;
}
.grid-wrapper .tall {
  grid-row: span 2;
}
.grid-wrapper .big {
  grid-column: span 2;
  grid-row: span 2;
}
.grid-wrapper .triple {
  grid-column: span 2;
  grid-row: span 3;
}
.grid-wrapper .extratall {
  grid-column: span 3;
  grid-row: span 2;
}

.img-thumbnail-variant-1 .caption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(21, 21, 21, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: 350ms ease-in-out;
  color: #fff;
}

.img-thumbnail-variant-1:hover .caption {
  opacity: 1;
  transform: scale(1);
}

This is both the original and "new" html code

<!-------------------Original HTML Code-------------------->
<div class="grid-wrapper">

  <div class="wide">
    <img src="https://images.unsplash.com/photo-1...;auto=format&amp;fit=crop&amp;w=1350&amp;q=80" alt="" />
  </div>

  <div class="big">
    <img src="https://images.unsplash.com/photo-1...;auto=format&amp;fit=crop&amp;w=1951&amp;q=80" alt="" />
  </div>

</div>

<!-------------------HTML Code I need to work with Link-------------------->
<div class="grid-wrapper">

  <div class="wide">
    <a class="img-thumbnail-variant-1" href="gallery-greatrooms.html">
      <img src="https://images.unsplash.com/photo-1...;auto=format&amp;fit=crop&amp;w=1350&amp;q=80" alt="" />
      <div class="caption">
        <span class="icon icon-lg fa-facebook"></span>
      </div>
    </a>
  </div>

  <div class="big">
    <a class="img-thumbnail-variant-1" href="gallery-greatrooms.html">
      <img src="https://images.unsplash.com/photo-1...;auto=format&amp;fit=crop&amp;w=1951&amp;q=80" alt="" />
      <div class="caption">
        <span class="icon icon-lg fa-facebook"></span>
      </div>
    </a>
  </div>

</div>

The .grid-wrapper > div > img { now has an <a in between the div and img but div > a > img doesn't work. What am I missing? Any help is SO APPRECIATED!

 

[LFlo]

Change the .grid-wrapper>div>img
to
.grid-wrapper>div>a,
.grid-wrapper>div>a>img

Worked!! I'm so sorry for all the dang confusion! This is my new favorite code forum! YOU are a lifesaver! This is due today. I could kiss you man!! Thank youuuuuuuu!!!!!

 

[Antero360]

Worked!! I'm so sorry for all the dang confusion! This is my new favorite code forum! YOU are a lifesaver! This is due today. I could kiss you man!! Thank youuuuuuuu!!!!!

Lol, glad to help