Gallery Alt Thumbnail styling

[sandraeddy04]

I wanted to change the height of the caption box from 100px to 50px…I figured that part out but I also need the vertical translate of the image on hover to change correspondingly so I don’t get a gap between the caption box and the image. Can you let me know what CSS I can add to address that? Thanks so much!

[Kyle – SUPPORT]

Hi

Which caption box are you referring to? can you provide a link?

– Kyle

[sandraeddy04]

This reply has been marked as private.

[Kyle – SUPPORT]

Add this to your custom css:

.thumbnail-gallery-alt-one figure.overlay-style figcaption {
  height: 50px;
}
.thumbnail-gallery-alt-one figure.overlay-style:hover img {
  transform: translateY(-50px);
}

– Kyle

[sandraeddy04]

works perfectly, thank you!

[Kyle – SUPPORT]

No problem

[sandraeddy04]

Hey Kyle! That code is working for the image banner, but not on the page with the multi-size masonry widget:
http://www.discoverqantas.com/?page_id=8

Could you let me know what CSS I can add to change the transform height there? Thanks!

[Kyle – SUPPORT]

Instead of my previous css try this:

figure.overlay-style figcaption {
  height: 50px;
}
figure.overlay-style:hover img {
  transform: translateY(-50px);
}

– Kyle