asked on

Need help adding CSS transition / fade effect when hovering over background images

Doe anyone here have any suggestions as to how I might add some kind of transition (ie: fade in/fade out effect) when hovering over the large horizontal images on this page (ie: Mosaic, Panorama, Watercolor, Indian Springs, The Ranches):

https://rgc.touchstoneliving.com/

Here is the CSS that I have currently. How might I adapt this?

.mosaic-bg > div:hover {
    background-image: linear-gradient(rgba(44, 38, 108, 0), rgba(44, 38, 108, 0)), url('images/mosaic-bg.jpg');
    cursor: pointer;
}

.panorama-bg > div {
    background-image: linear-gradient(rgba(227, 171, 53, .6), rgba(227, 171, 53, .6)), url('images/panorama-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.panorama-bg > div:hover {
    background-image: linear-gradient(rgba(44, 38, 108, 0), rgba(44, 38, 108, 0)), url('images/panorama-bg.jpg');
    cursor: pointer;
}

.watercolor-bg > div {
    background-image: linear-gradient(rgba(0, 90, 156, .6), rgba(0, 90, 156, .6)), url('images/watercolor-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.watercolor-bg > div:hover {
    background-image: linear-gradient(rgba(0, 90, 156, 0), rgba(0, 90, 156, 0)), url('images/watercolor-bg.jpg');
    cursor: pointer;
}

.indiansprings-bg > div {
    background-image: linear-gradient(rgba(189, 52, 36, .6), rgba(189, 52, 36, .6)), url('images/indian-springs-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.indiansprings-bg > div:hover {
    background-image: linear-gradient(rgba(189, 52, 36, 0), rgba(189, 52, 36, 0)), url('images/indian-springs-bg.jpg');
    cursor: pointer;
}

.theranches-bg > div {
    background-image: linear-gradient(rgba(44, 38, 108, .6), rgba(44, 38, 108, .6)), url('images/the-ranches-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.theranches-bg > div:hover {
    background-image: linear-gradient(rgba(44, 38, 108, 0), rgba(44, 38, 108, 0)), url('images/the-ranches-bg.jpg');
    cursor: pointer;	
}

Open in new window

Please advise. Thanks!
-- Yvan

Scott Fell

here is a fiddle that may help. You are just adding opacity and transition to your css. I attached it to a class but you can remove that and just use img for all images.

https://jsfiddle.net/81m3x04g/

<a><img class="fade" src="https://images.unsplash.com/photo-1459801670730-4e97c79bf3ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"></a>

Open in new window

.fade {
opacity: 1.0;
transition: opacity 1s ease-in-out;

}
a .fade:hover  {
opacity: .6;
transition: opacity .55s ease-in-out;
}

Open in new window

egoselfaxis

ASKER

Thanks Scott . .but this isn't quite what I'm looking to achieve. I'm trying to slow down / animate the transition between the gradient overlayed image and the non-gradient overlaid image.

- Yvan

Paul MacDonald

Here's an article on crossfading images, which is what I think you're looking for.

egoselfaxis

ASKER

Thanks Paul .. but nope, that's still not it. I am initially overlaying a CSS gradient effect over a single image, and I'm essentially just trying to "slowly fade out" the transition between the gradient overlaid image and the non gradient overlaid image.

Scott Fell

You can change the timing easily. Here is 3 seconds.
https://jsfiddle.net/gxmq8f9c/

.fade {
opacity: 1.0;
transition: opacity 3s ease-in-out;

}
a .fade:hover  {
opacity: .6;
transition: opacity 3s ease-in-out;
}

Open in new window

egoselfaxis

ASKER

Anyone else? I thought I did a fair job of explaining what it is that I'm trying to achieve here, but perhaps not.
Is this just not technically possible?

- Yvan

Scott Fell

obviously we must have misunderstood I thought my examples did what you want but if that's not the case please let me know how to adjust.

Julian Hansen

@egoselfaxis,

I have been following this thread and I have to admit that I am not clear on requirements. I thought Scott provided good examples but clearly they are not in line with your expectation.

Can you find an example site that shows what you want to do so that we can get a visualization?

Let's look at your opening question

Doe anyone here have any suggestions as to how I might add some kind of transition (ie: fade in/fade out effect) when hovering over the large horizontal images on this page (ie: Mosaic, Panorama, Watercolor, Indian Springs, The Ranches):

You ask for "some kind of transition" but you don't give explicit instructions on what you are looking for exactly.

You then posted

I'm trying to slow down / animate the transition between the gradient overlayed image and the non-gradient overlaid image.

And

I am initially overlaying a CSS gradient effect over a single image, and I'm essentially just trying to "slowly fade out" the transition between the gradient overlaid image and the non gradient overlaid image

So Scott slowed it down.
That also was not right.
Where have you given explicit instructions on what you want to achieve?

The more detail (and examples) you can give us the better the responses will be. So far Scott has given you two good examples - which easily fit your specifications as they appear in this thread. If they are not right you need to be more explicit.

egoselfaxis

ASKER

If you have a look at my current CSS --- as well as the page URL that I'm currently working on --- (both of which I posted in my initial question) you'll see that I have a background image that has a gradient color overlay that has a percentage value of about 60% (ie: .6) .. and that then changes to 0% oh hover (ie: 0). I'm just trying to slow down that transitioning from 60% to 0% so that the hover effect is more subtle and not so abrupt .. as is happening currently. I'm not trying to achieve anything having to do with opacity at all whatsoever.

https://rgc.touchstoneliving.com/

Here is another shorter code snippet for reference:

.panorama-bg > div {
    background-image: linear-gradient(rgba(227, 171, 53, .6), rgba(227, 171, 53, .6)), url('images/panorama-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.panorama-bg > div:hover {
    background-image: linear-gradient(rgba(44, 38, 108, 0), rgba(44, 38, 108, 0)), url('images/panorama-bg.jpg');
    cursor: pointer;
}

Open in new window

- Yvan

Julian Hansen

In other words you are looking for a way to do

transition: background-image 3s;

Open in new window

But because background-image is not supported in a transition you need another solution?

One option would be to setup an animation and then configure the background image as part of that.

CSS Animations are not my forte so maybe someone can help you out with the specifics

I did find this YT vid which may give some insight.

https://www.youtube.com/watch?v=f3mwKLXpOLk

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

egoselfaxis

ASKER

Yes ... this is definitely the type of effect I was looking for .. thank you Scott !

https://rgc.touchstoneliving.com/

It took me a bit to figure out how to merge your modifications into what I already had going on .. but I am very pleased with the end result. Thanks for your patience. Have a great weekend!

- Yvan

Scott Fell

I am glad it worked. I think I could have been more direct and stated it is the transition https://developer.mozilla.org/en-US/docs/Web/CSS/transition#Specifications property you were looking for. The spec does show that gradients are not really supported yet.