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

egoselfaxis
egoselfaxis used Ask the Experts™
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
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

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 MacDonaldDirector, Information Systems
Here's an article on crossfading images, which is what I think you're looking for.
OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.

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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
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

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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
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.
Most Valuable Expert 2017
Distinguished Expert 2018
@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.
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
Most Valuable Expert 2017
Distinguished Expert 2018
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
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
I'm not sure that the linear gradient is supported for this either.  But this works
https://jsbin.com/jegalepita/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .panorama-bg > div {
    background:  url('https://rgc.touchstoneliving.com/wp-content/themes/houzez-child/images/panorama-bg.jpg') rgba(227, 171, 53, .6);
  background-size:cover;
   background-blend-mode: multiply;
      
      
}

.panorama-bg > div:hover {
  
   background: url('https://rgc.touchstoneliving.com/wp-content/themes/houzez-child/images/panorama-bg.jpg') rgba(44, 38, 108, 0);
  background-size:cover;
   background-blend-mode: multiply;
   transition:background 3s;
 
 
}
  </style>
</head>
<body>
  <div class="panorama-bg wpb_column vc_column_container vc_col-sm-9 vc_col-has-fill">
     <div class="vc_column-inner vc_custom_1569431943879">
        <a href='/communities/panorama/' class='big_link' style='position:absolute;top:0;left:0;width:100%;height:100%;z-index:9999;'aria-hidden='true'></a>
        <div class="wpb_wrapper">
           <div class="vc_empty_space"   style="height: 300px"><span class="vc_empty_space_inner"></span></div>
        </div>
     </div>
  </div>
</body>
</html>

Open in new window

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 FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial