Jump to content

Text over Image on Hover

Recommended Posts

Site URL: https://potato-sphere-g3k8.squarespace.com/about

Hi! Does anyone know how to create a hover effect where as you click on each one of these images, there is text that appears (the text for each image is in the green pic).  I found a bunch of examples of codes on this site but not sure if I need to edit them at all for our images? http://css-workshop.com/hover-box-text-over-images-on-hover-and-more/ Thanks!! @tuanphan

Wesbite: naonow.com Password: naonow

These images are on our About page (https://potato-sphere-g3k8.squarespace.com/config/ or https://naonow.com/about)

image.thumb.png.a40498d9e7e5168c43c042c6ffd5da19.png

 

image.thumb.png.66893ce2124843fedea7d18caa64c70e.png

Edited by rachelt
Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

Thank you so much!! @tuanphan

I was able to add the text on top of those images but was wondering if there's a way to:

1) Make the black box with text fill up entire image box like in that example with the text in the center 

2) Make the box lighter black in color

3) Add a cool effect like sliding up

Thank you!!! This is on our about page: 

https://naonow.com/about password: naonow

https://potato-sphere-g3k8.squarespace.com/config/

 
 

DBEB19FD-A094-48CF-BB6E-3B87F2CE698C.jpeg

D7FC7B36-8D0D-4ABC-9181-F45F758B8986.png

Edited by rachelt
Link to comment
12 hours ago, rachelt said:

Tried that! Don't see any changes! @tuanphan Where is the place to delete 75%?

 

.image-block figcaption.image-caption-wrapper {
    background-color: rgba(4,90,96,0.95) !important;
    max-height: unset !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thank you!!! Now the boxes are too big... is there a way to make them the EXACT size of the images? @tuanphan And how do I make them a slightly lighter black?

Edited by rachelt
Link to comment
8 hours ago, rachelt said:

Thank you!!! Now the boxes are too big... is there a way to make them the EXACT size of the images? @tuanphan And how do I make them a slightly lighter black?

edit background in above code

.image-block figcaption.image-caption-wrapper {
    background-color: rgba(4,90,96,.95) !important;
    max-height: unset !important;
    max-height: 100% !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Sorry-it's still not working for the top three images! Some have a scroll thing and others are too small! (see attached) I ended all the font so it can fit within the size of the image. I just want the box to perfectly cover the image with no scrolling! Is this possible?Thanks!! @tuanphan How do you also make it have this in mobile view? In mobile view it doesn't take up the whole image. 

IMG_1445.thumb.jpg.f7e9184e363a8296230978ff0cee48b9.jpg

 

IMG_1446.jpg

Edited by rachelt
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.