Jump to content

CSS - Can I code multiple image effects (hover over reveal text) in the same code block?

Go to solution Solved by tuanphan,

Recommended Posts

Hello!
I've used a code from Becca Inside The Square to code some hover-over image effects for a clients portfolio page. 

My client has a lot of images, across multiple pages. It's going to take a while to add all of this code, and I'm worried that the CSS coding page is going to be too busy and confusing to look back on! 

Is there a way for me to code the same CSS effect in one code snippet, that applies to multiple block ID's? I did try to seperate with a comma, but it didn't seem to work. I have to use !important, otherwise it doesn't show live. 

The code I am using is below - you can see this is for two images. 

/*SHEAFED STELLA */
@media only screen and (min-width: 640px){
#block-c7a7e892bbe68503d21b  {
opacity: 0 !important;
 transition: opacity 1s
}

#block-c7a7e892bbe68503d21b:hover {
opacity: 1 !important;
transition: opacity 1s
}
  }

/*REBELLION */
@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1692698626537_26616  {
opacity: 0 !important;
 transition: opacity 1s
}

#block-yui_3_17_2_1_1692698626537_26616:hover {
opacity: 1 !important;
transition: opacity 1s
}
  }

 

The page is https://rectangle-cardioid-z6nt.squarespace.com/stellamccartney - it's not live yet, pass is Dodger50!

 

Link to comment
  • Replies 15
  • Views 2.8k
  • Created
  • Last Reply

Top Posters In This Topic

Instead of using Text Block + Image Block. You can use Section (with Section Background Image) + Text Block. Then we can target All Section/Text Block on current page to achieve hover with some line of code (maybe 5 - 7 lines of code) (I used to help a member to achieve this with section, so it is possible. his case similar your case).

If you need, I can do a quick demo, then you can apply similar

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

Hi Tuanphan,

Thank you for your suggestion, the site now has all content within one single section, so we can target the whole section now!

Please can you help me achieve the following? The page is: https://rectangle-cardioid-z6nt.squarespace.com/config/pages / Dodger50!

So I would like to achieve the above, the hover-over effect that Becca created, for all text within the section.

I would also like to decrease the amount of space between the heading and sub heading, as the gap is quite large - example below. I'd like to do this on all text on the site.


image.thumb.png.eca05998fd8135720f40653a8949bd0d.png

 

Is it possible to target the whole section with 2 pieces of code?

Thanks in advance!

Link to comment
On 9/13/2023 at 10:24 PM, RebelRuth said:

Hi Tuanphan,

Thank you for your suggestion, the site now has all content within one single section, so we can target the whole section now!

Please can you help me achieve the following? The page is: https://rectangle-cardioid-z6nt.squarespace.com/config/pages / Dodger50!

So I would like to achieve the above, the hover-over effect that Becca created, for all text within the section.

I would also like to decrease the amount of space between the heading and sub heading, as the gap is quite large - example below. I'd like to do this on all text on the site.


image.thumb.png.eca05998fd8135720f40653a8949bd0d.png

 

Is it possible to target the whole section with 2 pieces of code?

Thanks in advance!

/config/* is admin url. You can click top left or top right arrow > real url will appear on browser address bar

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/15/2023 at 7:40 PM, RebelRuth said:

Use this CSS code

/* section hover */
body#collection-64f70b73d26309086c7a8dc6 {
section:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s ease;
}
section:hover:after {
    opacity: 1;
    transition: all 0.3s ease;
}
section .html-block {
    opacity: 0;
    transition: all 0.3s ease;
}
section:hover .html-block {
    opacity: 1;
    transition: all 0.3s ease;
}}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi Tuanphan,

Thank you!
I've just tried to upload the CSS but it isn't quite working - can you check for me?

Sometimes the images load, sometimes they don't - it's strange!

I'd like all of the images to be visible first, and then when hover, over the text and white background appears, when hover off the image appears again.

TIA

Link to comment
On 9/19/2023 at 10:08 PM, RebelRuth said:

Hi Tuanphan,

Thank you!
I've just tried to upload the CSS but it isn't quite working - can you check for me?

Sometimes the images load, sometimes they don't - it's strange!

I'd like all of the images to be visible first, and then when hover, over the text and white background appears, when hover off the image appears again.

TIA

You mean these sections? I see you haven't added Images yet. Can you check it again?

image.thumb.png.8546748532ba6ab71d5d99b2fe0c4d4c.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

 Hi Tuanphan,
Sorry I might not have explained myself!

So when I am in the editor mode, the CSS effect works, but when I am in live view it doesn't. 

I added a white background to the text to achieve the desired effect, which is why the top few appear white (I haven't done the bottom ones just yet).

Also, when I am in the page live in browser, the effect only works when I hover my cursor in the navigation bar of Google Chrome - any time the cursor appears on the page, the CSS doesn't work. 

I have uploaded a video to try to show you (named Untitled)- please watch the cursor in the video so you can see. 

 

And here in the second video (named Untitled 2), you can see this is live in a browser - it doesn't work at all.

 

So basically what we need to fix is:

- CSS effect to work when live in browser - Chrome, Safari etc.
- CSS to work when cursor appears on page (not when cursor is in browser)

Hope that makes sense!

Thanks

Link to comment
On 9/17/2023 at 12:07 PM, tuanphan said:

Use this CSS code

/* section hover */
body#collection-64f70b73d26309086c7a8dc6 {
section:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s ease;
}
section:hover:after {
    opacity: 1;
    transition: all 0.3s ease;
}
section .html-block {
    opacity: 0;
    transition: all 0.3s ease;
}
section:hover .html-block {
    opacity: 1;
    transition: all 0.3s ease;
}}

 

I think you misread my idea. My ideal is each image + text will be on a section, not all text + image on a section

In your case: Sheafed in Stella, Rebellion Campaign, Pop Art Flowers, you will need to create 3 sections, then add text to these section, then you can use code I sent above

image.thumb.png.166881eec1958fcd7107b3cf1de57e58.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 1 month later...
  • Solution
On 11/29/2023 at 11:59 PM, RebelRuth said:

Hi Tuanphan,

Me again!

Is there a way to disable this hover effect on a mobile view, please?

Thanks,

Ruth

Which code did you use? If you used this code

image.thumb.png.51f5cf3fe97b1df926dc9a2f5efe2e35.png

You can change it to new code

/* section hover */
@media screen and (min-width:992px) {
body#collection-64f70b73d26309086c7a8dc6 {
section:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s ease;
}
section:hover:after {
    opacity: 1;
    transition: all 0.3s ease;
}
section .html-block {
    opacity: 0;
    transition: all 0.3s ease;
}
section:hover .html-block {
    opacity: 1;
    transition: all 0.3s ease;
}}}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.