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

Rollover effect on banner/thumbnail image


SabinaP

Question

19 answers to this question

Recommended Posts

  • 1
2 hours ago, SabinaP said:

@tuanphan Thank you!
Eep, I was aiming for the opposite effect, my apologies, I wasn't clear. It would be cool to have the text visible on hover. 

Okay. Use this

section#welcome:before {
    content: "";
    background: rgba(255,255,255,0.7);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
	visibility: hidden;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
section#welcome:hover:before {
    opacity: 1;
	visibility: visible;
}
/* Hide text on hover */
section#welcome .sqs-block-content * {
    visibility: hidden;
}
section#welcome:hover .sqs-block-content * {
    visibility: visible;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

@SabinaP Please setup password & share url again. If you don't know how to. See my signature

Private Site
This site is currently private. If you’re the owner or contributor, log in.

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
37 minutes ago, SabinaP said:

Ah! Bugger. I didn't realise that. Password is sabinajustyna1
Link to site again https://cheetah-lemon-wxxb.squarespace.com/

Thank you.

Private Site
This site is currently private. If you’re the owner or contributor, log in.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
3 minutes ago, SabinaP said:

Eek! Try again? I thought I saved the new settings. I've just made sure of it.

You mean banner image below "Branding for you with strategy and style"?

Seems difficult, it same background image

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
1 minute ago, tuanphan said:

You mean banner image below "Branding for you with strategy and style"?

Seems difficult, it same background image

Thank you for your response. Yes, the banner image behind "Branding for you with strategy and style".

Perhaps there is another way to do it? I don't mind changing things up to get the same look and effect.

Link to comment
  • 0

@SabinaP Add to Home > Design > Custom CSS

/* Set overlay background - Hidden */
section#welcome:before {
    content: "";
    background: rgba(0,0,0,0.5);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
}
/* Show overlay */
section#welcome:hover:before {
    opacity: 0.5;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
6 minutes ago, tuanphan said:

@SabinaP Add to Home > Design > Custom CSS


/* Set overlay background - Hidden */
section#welcome:before {
    content: "";
    background: rgba(0,0,0,0.5);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
}
/* Show overlay */
section#welcome:hover:before {
    opacity: 0.5;
}

 

Hmm, I have done that. It nearly mimics the same effect, but not quite there yet.

Link to comment
  • 0

@SabinaP Remove code I sent, and use this

section#welcome:before {
    content: "";
    background: rgba(255,255,255,0.7);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
	visibility: hidden;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
section#welcome:hover:before {
    opacity: 1;
	visibility: visible;
}
/* Hide text on hover */
section#welcome:hover .sqs-block-content * {
    visibility: hidden;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

I am new to using code and tried to get this to work on my site. But couldn't. I would love to have this option for a couple of my pages. Where do I put this code. I tried it in Design/Custom CSS and that didn't work. But I also don't know if I need site/page specific info to modify the code. Can you help.

 

Link to comment
  • 0
On 3/1/2021 at 5:23 AM, JonathanPenner said:

I am new to using code and tried to get this to work on my site. But couldn't. I would love to have this option for a couple of my pages. Where do I put this code. I tried it in Design/Custom CSS and that didn't work. But I also don't know if I need site/page specific info to modify the code. Can you help.

 

Can you share link to your site? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 3/10/2021 at 9:46 AM, JonathanPenner said:

Yes, this banner would be one page I would like to be able to have a roll over.

 

Add to Design > Custom CSS

/* Home banner hover */
body.homepage article section:first-child .section-background:after {
    content: "";
    background: rgba(255,255,255,0.7);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    visibility: visible;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 20000;
}
body.homepage article section:first-child:hover .section-background:after {
    opacity: 1;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Create an account or sign in to comment

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

×
×
  • Create New...