Jump to content

Hide coloured layer on mouseover of icon

Recommended Posts

Site URL: https://shayech.squarespace.com/

 

Hi there

I would like to hide the coloured overlay on mouseover of my icon in the footer. I tried the following code, but it does not work. Can anyone please help?

PW: SF2022
 
/* footer image transparent overlay */
div#block-yui_3_17_2_1_1646736558679_3608.image-overlay {
    background: transparent !important;
}
 
Many thanks
Sibylle
Link to comment
  • Replies 5
  • Views 185
  • Created
  • Last Reply

Top Posters In This Topic

Just now, orneverornow said:

Site URL: https://shayech.squarespace.com/

 

Hi there

I would like to hide the coloured overlay on mouseover of my icon in the footer. I tried the following code, but it does not work. Can anyone please help?

PW: SF2022
 
/* footer image transparent overlay */
div#block-yui_3_17_2_1_1646736558679_3608.image-overlay {
    background: transparent !important;
}
 
Many thanks
Sibylle

And one more questions: How can I make the last 3 projects on the page PROJEKTE not clickable. It should not link to a detailpage at all.

Thank you so much.
Sibylle

Link to comment
On 4/6/2022 at 5:28 PM, orneverornow said:

Site URL: https://shayech.squarespace.com/

 

Hi there

I would like to hide the coloured overlay on mouseover of my icon in the footer. I tried the following code, but it does not work. Can anyone please help?

PW: SF2022
 
/* footer image transparent overlay */
div#block-yui_3_17_2_1_1646736558679_3608.image-overlay {
    background: transparent !important;
}
 
Many thanks
Sibylle

Edit this CSS

body.homepage .has-aspect-ratio:after {
    content: "";
    position: absolute;
    background-color: rgba(253,187,153,.6);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all .3s;
}

to this code

body.homepage article .has-aspect-ratio:after {
    content: "";
    position: absolute;
    background-color: rgba(253,187,153,.6);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all .3s;
}

#2. Use this CSS
 

div#gridThumbs>a:nth-last-child(-n+3) {
    pointer-events: none;
}

 

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
23 hours ago, tuanphan said:

Edit this CSS

body.homepage .has-aspect-ratio:after {
    content: "";
    position: absolute;
    background-color: rgba(253,187,153,.6);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all .3s;
}

to this code

body.homepage article .has-aspect-ratio:after {
    content: "";
    position: absolute;
    background-color: rgba(253,187,153,.6);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all .3s;
}

#2. Use this CSS
 

div#gridThumbs>a:nth-last-child(-n+3) {
    pointer-events: none;
}

 

Thank you very much @tuanphan!!!
Is there any possibility to have a different logo (colour) on the subpages than on the homepage?

Best
Sibylle

Link to comment
On 4/11/2022 at 3:32 PM, orneverornow said:

Thank you very much @tuanphan!!!
Is there any possibility to have a different logo (colour) on the subpages than on the homepage?

Best
Sibylle

You mean, change logo to different logo color, on these pages?

https://shayech.squarespace.com/projekte/kilchberg-sunset-house

https://shayech.squarespace.com/projekte/thalwil-zimmerbergstrasse

...

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 hours ago, tuanphan said:

Hi @tuanphan.

I mean all the subpages, except the HOME. I would like to upload a darker logo on the following pages for a better visibility:

https://www.shaye.ch/projekte
https://www.shaye.ch/ueber-uns
https://www.shaye.ch/kontakt
and obviously also all the detail pages of the projects like for example:
https://www.shaye.ch/projekte/kilchberg-sunset-house

The homepage is fine with a bright logo: https://www.shaye.ch/
 

Thank you very much and happy easter!
Sibylle

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.