Jump to content

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

Recommended Posts

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?

Link to comment
  • Replies 5
  • Views 884
  • Created
  • Last Reply

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. 

Link to comment
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!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.