Jump to content

Image Hover Fade Out

Recommended Posts

Posted

Hi,

I am using the css code below to add a hover fade effect on my images. However, the images fade out very quickly.

Any idea if there is a line I can add to make it fade out slowly when the cursor is taken off the image?

 

.image-block:hover {
background-color: #00000; opacity: 0.6; transition: all .5s ease-in-out;}

 

Thank you in advance 🙂 

Posted
2 minutes ago, tuanphan said:

edit .5 in above code

you can change to 2s, 3s, 10s, 100s..

Hi,

Yes, but for some reason this only changes the Fade In....there is no fade out when the cursor leaves the image 😕

  • 11 months later...
Posted (edited)
On 8/24/2020 at 11:45 AM, oddthing said:

Hi,

Yes, but for some reason this only changes the Fade In....there is no fade out when the cursor leaves the image 😕

The fade in AND out should work if you separate the two states kind of like this:

/*original state*/
.image-block{
  transition: .5s;
}

/*hover state*/
.image-block:hover {

  opacity: 0.6;
}

 

Maybe this helps you as well: 

 

Edited by MichGlad
  • 1 month later...
  • 1 year later...
Posted
On 9/28/2021 at 5:23 PM, dariokomazec said:

Just copy/paste this code:

 

.image-block {
transition: all .5s ease-in-out;}



.image-block:hover {
background-color: #00000; opacity: 0.6; transition: all .5s ease-in-out;}

 

Dude, you're a hero. been looking everywhere for how to do this and nothing was working. 

Just wanted to add to this:
If anyone is looking to fade/transition between two images, (using SS 7.1 + FE)
- Stack 2 images ontop of each other
- Use the code above in the custom CSS section

- If you want this to only work on one page,
- Enter the code above in the "page header code injection" section of your page. make sure to put it between <style></style> in order for it to work

Example:
<style>.image-block {
transition: all .5s ease-in-out;}

.image-block:hover {
background-color: #00000; opacity: 0; transition: all .3s ease-in-out;}</style>

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.