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?
Please advise. Thanks!
-- Yvan
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;
}
Please advise. Thanks!
-- Yvan
Web DevelopmentCSSHTML
Last Comment
Scott Fell
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
- Yvan
Here's an article on crossfading images, which is what I think you're looking for.
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.
You can change the timing easily. Here is 3 seconds.
https://jsfiddle.net/gxmq8f9c/
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;
}
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
Is this just not technically possible?
- Yvan
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.
@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
You then posted
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.
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 imageSo 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.
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:
- Yvan
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;
}
- Yvan
In other words you are looking for a way to do
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
transition: background-image 3s;
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
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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
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
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.
https://jsfiddle.net/81m3x04g/
Open in new window
Open in new window