How do I change an image in CSS with the following condition

Question

This is the style for the image :

.gaming{
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat; 
background-size:cover;
background-image:url("gaming.jpg");
height:100%;
border:#00AEF2 3px;
}

and this one for the element I intend to do a hover effect which changes the background-image in .gaming :

<section class="New-era-1 list_text" >Artificial Intelligence</section>

What I tried

.New-era-1:hover .gaming{
background-image:url("just-for-fun.jpg")
} 

But no luck. How do we go about this problem?

Answer 1

The way you're targeting your .gaming class means the HTML element associated with it needs to be inside the .new-era-1 <section> element. It should work after that. See below:

CSS

.gaming{
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat; 
background-size:cover;
background-image:url("http://www.alien-covenant.com/app/xalien-covenant-fill.jpg.pagespeed.ic.rPyCbS72Kx.jpg");
height:500px;
width: 400px;
border:#00AEF2 3px;
}
.New-era-1:hover .gaming{
background-image:url("https://i1.fdbimg.pl/fvpxi5v1_o6b4xt.jpg")
} 

HTML

<section class="New-era-1 list_text" >Artificial Intelligence
<div class="gaming"></div>
</section>

See my JSFiddle: https://jsfiddle.net/0esrq2by/

Answer 2

Another approach is to use jquery, to change hover effect, like this:

$('.new-era-1').hover(){
   $('.gaming').css('background-image', 'url(to-your-image.jpg)');
}