Jump to content

Show "Enlarge" on hover - Gallery Section

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 9
  • Views 542
  • Created
  • Last Reply

Top Posters In This Topic

On 9/7/2022 at 7:20 PM, BekarHaus said:

Hello ️squarespacers _,

I need help/advice.

In gallery section (Grid: Simple+Lightbox)

I want that on hover text "Enlarge" appear in lower right corner 

at bottom of the page. 

I tried quite a lot - but no luck.

Is it even possible?

Best

Duško Bekar

Screen Shot 2022-09-07 at 1.42.26 PM.png

Do this on Explore page or which page?

https://bekar.haus/explore-bekar-haus

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
On 9/20/2022 at 3:40 PM, BekarHaus said:

Click HERE for the page.

It's the only page I work on.

Edit page > Add a Code Block (anywhere) >paste this code

<style>
  figure.gallery-grid-item:after {
    content: "+ Enlarge";
    display: inline-block;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 99999;
    background-color: rgba(255,255,255,0.3);
    padding: 10px 20px;
    border-radius: 30px;
    opacity: 0;
}
figure.gallery-grid-item {
    position: relative;
}
figure.gallery-grid-item:hover:after {
    opacity: 1;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/21/2022 at 7:22 PM, BekarHaus said:

Hallo Tuan,

Thank you. It's working perfectly.

I only changed z-index: 99999; to z-index: 9998;

Wich parameter should I change to move it from right to left corner?

Best

Duško Bekar

P.S. I am going to send you DM

 

change this line to left: 10px;

right: 10px;

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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...

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.