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!

 

[Johna]

What happens if you make the a element a block or inline-block element?

Not sure how it works if you place a block element inside an inline element.

 

[LFlo]

What happens if you make the a element a block or inline-block element?

Not sure how it works if you place a block element inside an inline element.

Thank you tons for your response! And I apologize if I sound a bit novice... my brain is just not working with this code! Everything seems to work other than the below lines of css which make the masonry grid photos overlap in some areas and jumbled all over the page (See photo 1, photo 2 is the original code without the hover element). The hover element and links out work just fine and are correctly over the photos, it just messes up layout. Where were you suggesting I put the block or inline-block.... in the img-thumbnail-variant-1 class that is on the a element or?

.grid-wrapper > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

 

[Johna]

Where were you suggesting I put the block or inline-block.... in the img-thumbnail-variant-1 class that is on the a element or?

I meant on the <a> element, but you should probably rather try using display: contents; on the <a> element instead of block or inline-block.

 

[LFlo]

I meant on the <a> element, but you should probably rather try using display: contents; on the <a> element instead of block or inline-block.

I apologize again, and thank you so much for your responses. I'm still not understanding the fix here. Can you write this like I'm a complete novice because try as I might I'm not seeing it. Could you specify the code you're speaking of by writing it out? Are you saying that instead of the <a> class img-thumbnail-variant-1 css below, that I should fill the a element with the contents photo? I think I'm confusing myself even more. Would you be willing to really spell it out for me please?

.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);
}

 

[Johna]

Adding the display: contents; property to the <a> element (with the img-thumbnail-variant-1 class):

.img-thumbnail-variant-1 {
  display: contents;
}

Not 100% sure it'll work, I haven't actually tried it, but it's worth giving it a try.

 

[LFlo]

Adding the display: contents; property to the <a> element (with the img-thumbnail-variant-1 class):

.img-thumbnail-variant-1 {
  display: contents;
}

Not 100% sure it'll work, I haven't actually tried it, but it's worth giving it a try.

Thank you for the try! Looks like it's not the way the <a> element is displaying that's the issue. Adding that just took the hover element out to the whole page when before it was working how it should (screenshot). It's definitely this line of css below that is messing this page up. Any other suggestions?

.grid-wrapper > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

 

[LFlo]

Hi there... anyone have any more suggestions? I don't know how to make this thread get any attention since it has replies, but no answers.....

 

[Antero360]

Hi there... anyone have any more suggestions? I don't know how to make this thread get any attention since it has replies, but no answers.....

Hi there,

Sorry if I am a bit late to the party, but I was looking over some of the other responses, and am a bit confused as to what it is you are trying to achieve. Can you please walk me through what it is you are looking to do?

 

[LFlo]

Hi there,

Sorry if I am a bit late to the party, but I was looking over some of the other responses, and am a bit confused as to what it is you are trying to achieve. Can you please walk me through what it is you are looking to do?

Hi there! Sure. It's just a masonry gallery. It's original layout looks like pic 1. It's responsive and it's formatting looks great. But, I need to add a hover detail that links out. An <a> to the mix. When I add that, the hover element works exactly like it should, but the masonry format goes out of whack. See pic 2 with one of the photos being hovered over but the layout with photos all over the page. Best I can tell, it's because I broke this order of a line in the css code:

.grid-wrapper > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

Because it went from > div > img ....to > div > a > img in the html path (But adding that a in the css does nothing). In this context the original html and the html I changed it to may help:

<!--------Original--------->
<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>

<!-------New 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>

 

[Antero360]

Ok, I think I see the issue...

 

[Antero360]

ok... so, because of our new security policies, some code may cause issues, but here is the solution you are looking for. Just add that onMouseOver attribute to your image

 

[LFlo]

ok... so, because of our new security policies, some code may cause issues, but here is the solution you are looking for. Just add that onMouseOver attribute to your imageView attachment 2349

Thank you so much for your responses! I see. Ok, but my hover effect has a css class all on it's own. How do I include that with an onMouseOver? CSS for hover effect below:

.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);
}

See <a class="....html above

 

[Antero360]

Thank you so much for your responses! I see. Ok, but my hover effect has a css class all on it's own. How do I include that with an onMouseOver? CSS for hover effect below:

.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);
}

See <a class="....html above

unfortunately there is no clear way to do so via css. It would have to be done in javascript... hence the onMouseOver

 

[LFlo]

unfortunately there is no clear way to do so via css. It would have to be done in javascript... hence the onMouseOver

Ok. Oh man, I really thought this would be easier. I thought, I'm only messing up one line of css, how hard could it be to figure out the photo layout with a bit of different css. Looks like I'm more confused about this than I thought. I don't know how to get that effect in js. Looks like I'm going to be searching code as this deadline is approaching fast.

 

[Antero360]

Ok. Oh man, I really thought this would be easier. I thought, I'm only messing up one line of css, how hard could it be to figure out the photo layout with a bit of different css. Looks like I'm more confused about this than I thought. I don't know how to get that effect in js. Looks like I'm going to be searching code as this deadline is approaching fast.

So, CSS handles the styling, hence the name Cascading Style Sheet...you could animations with css yes, but there are limitations to what css can do. If you need to redirect to another page when a user hovers over the image, you need some good old javascript for that lol.

 

[LFlo]

So, CSS handles the styling, hence the name Cascading Style Sheet...you could animations with css yes, but there are limitations to what css can do. If you need to redirect to another page when a user hovers over the image, you need some good old javascript for that lol.

I get that! For sure. And thank you so much for hanging around to help!! But the hover action with link out is already completely working with just css. My issue is applying the height, width, object fit and border radius to the img that I can't figure out. Again, this line of coding that deals with making the images width, height, fit and border is the only thing I can't figure out because I added the (completely functional) hover a element. I'm still pretty lost and for the first time in a long time, I just am not seeing the solution. Maybe I should add this to codepen so it helps with any confusion, myself included lol.

.grid-wrapper > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

I tried adding a class inside the img and making it img.masonrystyle { width: etc. That didn't work.

Basically I need to know how to apply the above css code to the img now that it's no longer .grid-wrapper > div > img because the new order is .grid-wrapper > div > a > img ....this is terribly hard to explain and I may just be repeating myself. Apologies and thanks again for continuing to try and help!

 

[LFlo]

Edit with hover:
Edit fiddle - JSFiddle - Code Playground

Original masonry gallery and how I need the above edit to look:
Edit fiddle - JSFiddle - Code Playground

 

[Antero360]

Edit with hover:
Edit fiddle - JSFiddle - Code Playground

Original masonry gallery and how I need the above edit to look:
Edit fiddle - JSFiddle - Code Playground

got it 🙂
So what you're gonna want to do, is this

 

[Antero360]

got it 🙂
So what you're gonna want to do, is this:

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

View attachment 2350