Adding captions to images in Wexley gallery index/pages when hovering

Site URL: http://emilykopf.com

Hi there!

I'm currently working with the Wexley template, and I'm trying to figure out how to further customize the hover effect when rolling over images on a gallery page.

My site is: http://emilykopf.com

I've already used the Site Styles to customize the background of the hover to a dark indigo, and I've customized the font style for the title. That being said, it seems like I'll need to employ some custom CSS to get the caption to show up, and customize that font (would prefer the caption to be smaller, and a serif font).

Ideally, I'd love to get a transition effect on the hover as well. Whether that's the image enlarging in the frame, or the caption and title moving together, any dynamic movement would be better.

I looked at Devon Stank's image hovers for reference, and considered purchasing, but these don't work for images within gallery indices. 

My favorite of his hover effects is: https://www.devonstank.com/squarespace-image-captions hover overlay 1. Any idea how to get this to work with a gallery index?

Here are some interesting effects image turns from color to black and white, which can be reversed, and it rotates/zooms on hover. You can see it in action here, thumbnails in an index, code placed in advanced  code injection header: https://myrandomviews.com/views-images

<style>#projectThumbs .project:hover .project-title {
  transition: 1.5s
}</style>

<style>a.project img {
    filter: grayscale(0);
}
a.project:hover img {
    filter: grayscale(1);
}</style>

<style>
a.project:hover img {
    transform: rotate(-5deg) scale(1.2);
}</style>

I also have a Wexley site, and all I have to do is edit an image, add a title and it appears on hover. 

Hey @requiemily, you can do that with CSS. Since it's a gallery you'll be limited with text because you only have a title. However you can still add some additional transitions and movement using CSS. 

@requiemily here's a quick demo of what you could customize with the existing layout.

Images scale on hover, and the one with the title has the title fade in and slide up. 

 

39 minutes ago, RyanDejaegher said:

Hey @requiemily, you can do that with CSS. Since it's a gallery you'll be limited with text because you only have a title. However you can still add some additional transitions and movement using CSS. 

Herein lies my issue, I think. There's absolutely no way to use CSS to find a workaround or format lines of "title" text to look distinct from the main text, when dealing with a gallery?

For example, I had hoped to have the title of that one image say: "Enrobed" and underneath "Digital illustration, 2019"  with two different types of text formatting. Should I just lose the gallery entirely and build a page based on individual image blocks?

Thanks for making that demo for me, I'll have to find that CSS — it looks really cool!

Without further custom coding it wouldn't be possible to add text to gallery unfortunately