CODEWITHSUNDEEP
htmlcss
user6025181
user6025181

Reputation:

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

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?

Upvotes: 0

Views: 588

Answers (2)

Arturas Lapinskas
Arturas Lapinskas

Reputation: 336

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)');
}

Upvotes: 0

Kellen
Kellen

Reputation: 1032

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/

Upvotes: 1

Related Questions