Guest Posted May 13, 2020 Share Posted May 13, 2020 (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) Edited May 13, 2020 by rachelt Link to comment
tuanphan Posted May 13, 2020 Share Posted May 13, 2020 You can use this effect (Image Block) Just copy & paste code ✌️ 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
Guest Posted May 14, 2020 Share Posted May 14, 2020 (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/ Edited May 14, 2020 by rachelt Link to comment
tuanphan Posted May 14, 2020 Share Posted May 14, 2020 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% 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
Guest Posted May 14, 2020 Share Posted May 14, 2020 (edited) Tried that! Don't see any changes! @tuanphan Where is the place to delete 75%? Edited May 14, 2020 by rachelt Link to comment
tuanphan Posted May 15, 2020 Share Posted May 15, 2020 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
Guest Posted May 15, 2020 Share Posted May 15, 2020 (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 May 15, 2020 by rachelt Link to comment
tuanphan Posted May 15, 2020 Share Posted May 15, 2020 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
Guest Posted May 15, 2020 Share Posted May 15, 2020 (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. Edited May 15, 2020 by rachelt Link to comment
tuanphan Posted May 16, 2020 Share Posted May 16, 2020 your text is too long, so it will appear scrollbar. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment