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

Rollover effect on banner/thumbnail image

Question

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

 


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 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.

 


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 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.

Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0
2 minutes ago, tuanphan said:
Private Site
This site is currently private. If you’re the owner or contributor, log in.

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

Share this post


Link to post
  • 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


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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;
}

 


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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;
}

 


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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