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

Text over Image on Hover

Question

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

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

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

 


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

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


×
×
  • Create New...