Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


requiemily

Question

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
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

5 answers to this question

Recommended Posts

  • 1

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. 

Edited by derricksrandomviews
Link to comment
  • 0
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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...