Jump to content

How to: add custom hover over on images

Recommended Posts

Site URL: http://www.erichmcvey.com/

Hi all,

I have a specific question about a hover over text on an images page template: How can I add a custom hover over text and style? I am looking for something similar like in the provided site URL. I also attach a screenshot of that same URL.

The font would be Bodoni, the transparency accordingly.

 

Thank you for your replies and inputs.

Cheers

Screenshot 2020-06-17 at 18.47.58.png

Edited by emtheler
Link to comment
  • Replies 19
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Is this what you are achieve:

recap: http://recordit.co/U4vTx5kWMB

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@emtheler

You may need to increase your font-size. If there's not an option in the design settings you can add it with custom CSS

.image-caption p {
    font-family: 'ltc-bodoni-175';
    color: #363636 !important;
    text-align: center;
  	/* Optional font size, remove if you can adjust from Design settings */
  	font-size: 16px !important;
  
}

.image-caption-wrapper {
    background-color: rgba(255,255,255,.4) !important
}

 

PixelSnap 2020-06-17 at 15.48.57@2x.png

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
4 minutes ago, RyanDejaegher said:

@emtheler

You may need to increase your font-size. If there's not an option in the design settings you can add it with custom CSS


.image-caption p {
    font-family: 'ltc-bodoni-175';
    color: #363636 !important;
    text-align: center;
  	/* Optional font size, remove if you can adjust from Design settings */
  	font-size: 16px !important;
  
}

.image-caption-wrapper {
    background-color: rgba(255,255,255,.4) !important
}

 

PixelSnap 2020-06-17 at 15.48.57@2x.png

Ryan that is amazing, thank you so much! Unfortunately, I can't seem to make it work. I tried with custom css on the portfolio site itself, but got this instead=>

Screenshot 2020-06-17 at 21.57.42.png

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.