Changing picture inside img on hover with css

Question

I need to change source URL on hover.

I have tried this but won't work :

This is my Css:

.nav > li > div {
    position: absolute;
    display: block;
    width: 100%;
    top: 38px;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background: #ffffff;
    border-top-color: #5f7ec7;
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-color: #5f7ec7;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}
.nav > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

And This is my html:

<ul class="nav" style="width: 100%">
    <li>
        Something
        <a title="D" itemprop="url" href="/Default.aspx"><span itemprop="name">Something</span><img src="/images/Top-Menu-Layer/arrow_122b87.gif" style="vertical-align:middle; padding-left:5px; height:4px; width:7px" /></a>
       </li>
</ul>

I would like to change the content of the img tag inside the html via the css. How can I do it ? Any advice ?

please check this links : you may help this link. [Link 1](https://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover) [Link 2](https://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html) — Hardik Chapla, Jun 05 '17 at 06:58
What do you mean by `content of img tag` ? You mean the `src` attribute? — Jones Joseph, Jun 05 '17 at 06:58
Go to this link : https://stackoverflow.com/questions/2182716/is-it-possible-to-set-the-equivalent-of-a-src-attribute-of-an-img-tag-in-css — Himanshu Shekhar, Jun 05 '17 at 07:05
Possible duplicate of [CSS: Change image src on img:hover](https://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover) — Abhishek Pandey, Jun 05 '17 at 07:07

XYZ · Accepted Answer · 2017-06-05T07:39:03.390

3

Use content:url("imageURL"); Note[ This method only works in chrome not in Firefox or IE ].

.image{
  width:100px;
  height:100px;
}

.image:hover{
    content:url("http://via.placeholder.com/350x150");
}

<img class="image"/>

The best method is to use javascript or if you want a complete css solution use background-image instead of img tag and change background-image on hover

edited Jun 05 '17 at 07:39

answered Jun 05 '17 at 07:01

XYZ

4,450
2
15
31

why not `background-image`? – Jones Joseph Jun 05 '17 at 07:32
@JonesJoseph Sorry.It is in my answer.Use javascript or css background image – XYZ Jun 05 '17 at 07:38
Right! Sorry i dint notice `:)` – Jones Joseph Jun 05 '17 at 07:40
Ok, I like it. But I have a few images and I want just the image that I go over it to change and not all of them. Any idea ? – G P Jun 05 '17 at 07:54
@GP i think using a css only soluiton is not possible.Use have to use javascript./jquery – XYZ Jun 05 '17 at 07:57

Ehsan · Answer 2 · 2017-06-05T07:21:56.043

You can't with pure css,but can help Jquery.

$(document).ready(function(){
  $('.nav li').hover(function(){
        $('.target').attr('src','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLd77JVS_4xE04KaLd3E-j2pTyiO_fTcEwHgQL9tj8GMsXZQW2');
   },function(){
 $('.target').attr('src','http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg');
   })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <ul class="nav" style="width: 100%">
   <li>
     Something
     <a title="D" itemprop="url" href="/Default.aspx">
        <span itemprop="name">Something</span>
        <img class="target" src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" style="vertical-align:middle; padding-left:5px; height:40px; width:70px" />
        </a>
    </li>
</ul>

Changing picture inside img on hover with css

2 Answers2