CSS to change image URL - html

Question

How can I use an entirely separate CSS file to change/override only the URL for the image IMAGE.png?
<div id="id1" class="class1">
<div id="id2" class="class2">
<div class="class3">
<div id="id3">
<a class="logo" href="http://domain.com" tabindex="-1">
<img src="https://IMAGE.png"></img>
</a>
</div>
</div>
</div>
</div>
Thanks so much!

Answer 1

If you wants to achieve it with css, do it like this (Recommended).
.btn {
display: block;
width: 80px;
height: 80px;
background: url(http://mygimptutorial.com/images/button-with-metal-ring/13.jpg) no-repeat;
background-size: contain;
text-align: center;
color: #fff;
text-decoration: none;
}
.btn:hover {
background: url(http://mygimptutorial.com/images/button-with-metal-ring/8.jpg) no-repeat;
background-size: contain;
}
<div id="id1" class="class1">
<div id="id2" class="class2">
<div class="class3">
<div id="id3">
<a class="btn" href="http://domain.com" tabindex="-1"></a>
</div>
</div>
</div>
</div>
And with js do following.
$('.logo img').hover(function(){
$(this).attr('src','http://mygimptutorial.com/images/button-with-metal-ring/8.jpg');
},function(){
$(this).attr('src','http://mygimptutorial.com/images/button-with-metal-ring/13.jpg');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" class="class1">
<div id="id2" class="class2">
<div class="class3">
<div id="id3">
<a class="logo" href="http://domain.com" tabindex="-1">
<img src="http://mygimptutorial.com/images/button-with-metal-ring/13.jpg"></img></a>
</div>
</div>
</div>
</div>

Answer 2

use content in your dark-mode class
darl
content:url(image.jpg);

Answer 3

You can't change it with CSS, you need Javascript for that.
But if you are trying to change the image on for example hover, you could remove the img-tags and use a div instead on which you set a background-image.
In your CSS you can then create a block where you change the image on hover.