troubleshooting Question

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

Avatar of egoselfaxis
egoselfaxis asked on
Web DevelopmentCSSHTML
13 Comments1 Solution76 ViewsLast Modified:
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;	
}

Please advise.  Thanks!
-- Yvan
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 13 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 13 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros