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

Text over Image on Hover

Asked by rachelt

Question

rachelt    1

rachelt
Posted (edited)

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

Share this post

Link to post

9 answers to this question

Recommended Posts

  • 0

tuanphan    8,028

tuanphan
Posted

You can use this effect (Image Block)

Just copy & paste code ✌️

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

Link to post
  • 0

rachelt    1

rachelt
Posted (edited)

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

Share this post

Link to post
  • 0

tuanphan    8,028

tuanphan
Posted

edit .6 in this code (you can use 0 to 1, eg: 0.75)

background: rgba(4,90,196,.6) !important;

and remove max-height: 75%

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

Link to post
  • 0

tuanphan    8,028

tuanphan
Posted
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;
}

 

rachelt reacted to this

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

Link to post
  • 0

rachelt    1

rachelt
Posted (edited)

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

Share this post

Link to post
  • 0

tuanphan    8,028

tuanphan
Posted
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;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

Link to post
  • 0

rachelt    1

rachelt
Posted (edited)

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

Share this post

Link to post
  • 0

tuanphan    8,028

tuanphan
Posted

your text is too long, so it will appear scrollbar.

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

Link to post

Create an account or sign in to comment

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

Sign Up / Login
Go To Question Listing
×
×
  • Create New...

Support

Community

Developers

Resources