dou dou - 3 months ago 11
CSS Question

Edit an image inserted into the src of an image tag, only with css

I have to work with an html code that I can't modify (I have no access to it) and I only can overload the css.

I have an image, in an image tag, with an src parameter that throw an image in the page. I was wondering if there is any way in css to change this image ?

Answer

There is no way to change the image src by pure css but you can do this approach

Html Part:

<div class="my-image">
  <img src="http://i.telegraph.co.uk/multimedia/archive/03598/lightning-10_3598416k.jpg" />
</div>

Css Part:

.my-image img{  
     opacity: 0;max-width: 100%;
 }
.my-image{
    background-image: url("http://mixstuff.ru/wp-content/uploads/2013/07/15.jpg");
    width: 300px;
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
 }

Hope this may Help. Thanks