How to position text in gallery hover caption?

[xylo]

Hi all!

My CSS for gallery hover effect looks like below. I would like the caption text appear in the top left corner when images are hovered, with the text left aligned. Can’t figure out how to do this. Anyone have a suggestion? Thanks!

/* Image
——————————————————————————–*/

.galleryCaptionHover .galleryCaptionHolder {
height: 100%;
opacity: 100%;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
-webkit-backface-visibility: hidden;
}

.partialImageGalleryCaption.galleryCaptionHolder {
height: auto;
}

.galleryCaptionHover.galleryImageHolder:hover .galleryCaptionHolder {
opacity: 1;
}

.galleryCaptionHolderInner {
display: table;
height: 100%;
background-color: rgba(232,70,70,1);
}

.galleryCaptionInnerTextHolder {
display: table-cell;
vertical-align: middle;
}

[xylo]

Thanks Atelierbram, nice site you’ve got going there! Although I would prefer to just add some code to my existing css, if that’s possible. I cant’ mess with the html. It’s really just a matter of getting the caption text to the top left instead as the current position in center and get it left aligned. Is there perhaps an easier way of doing that?

[Paulie_D]

We’d need to see a minimal example of the HTML & CSS…in Codepen.io

This should be pretty simple.

[xylo]

Thanks Paulie_D,

I’ll try to do that and repost.

[Author]

Posts