PODS - PHOTO GALLERY WIDGET

Important: in all examples a class of .pods has been added to the .dmPhotoGallery element

DROP TEXT BACKGROUND OPACITY ON HOVER

Layout: Text/button on image
.pods .thumbnailInnerWrapper { background-color: #FFF; } .pods .photoGalleryThumbs a { opacity: 0.4; transition: all 0.3s ease; } .pods .photoGalleryThumbs:hover a { opacity: 0.7; }

REVEAL DESCRIPTION ON HOVER

Layout: Text/button on image
.pods .caption-text { opacity: 0; max-height: 0; transition: all 0.3s ease; } .pods .photoGalleryThumbs:hover .caption-text { opacity: 1; max-height: 1000px; }

TEXT WRAPPER HEIGHT AUTO

Layout: Text/button on image
#dm .dmPhotoGallery.pods .caption-container { display: flex!important; align-items: center; } .pods .caption-inner { height: auto!important; }

COMBINED TEXT WRAPPER HEIGHT AUTO & REVEAL DESCRIPTION

Layout: Text/button on image
.pods .caption-text { opacity: 0; max-height: 0; transition: all 0.3s ease; } .pods .photoGalleryThumbs:hover .caption-text { opacity: 1; max-height: 1000px; } #dm .dmPhotoGallery.pods .caption-container { display: flex!important; align-items: flex-end; } .pods .caption-inner { height: auto!important; }

BUTTON ON TOP OF TEXT

Layout: Text/button on image
#dm .dmPhotoGallery.newPhotoGallery.pods li.photoGalleryThumbs .caption-container .caption-inner { flex-direction: column-reverse; }

ICON ON TOP OF CONTENT

Layout: Text/button on image
.pods .caption-inner::before { content: ""; display: block; position: relative; height: 50px; width: 50px; margin: 10px auto; background: url('[IMAGE URL]') center center scroll no-repeat; background-size: cover; }