How to change source of tag on hover?

Question

I need to change <img> source URL on hover.

I have tried this but won't work :

HTML

<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

CSS

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

jsFiddle

Any help would be appreciated.

Update:

This only works for Webkit / Google Chrome.

`content` only works with `:before` or `:after` so this is not going to work. Why not use a `div` with a background image and onhover change that background image? — putvande, Aug 03 '13 at 11:14
I don't believe that you can change the source attribute with CSS only. jQuery or normal JavaScript are good candidates to do that simple.... and I agree with @putvande, the `content:` only works with `:before` or `:after` — sulfureous, Aug 03 '13 at 11:16
Well... you can set the background image of the `img` tag and just remove the `src` from your image. Although that is a bit strange, it will work. @HamedKamrava: You can only use an image or can you use something else? — putvande, Aug 03 '13 at 11:17
possible duplicate of [How can we specify src attribute of img tag in CSS?](http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css) — Cthulhu, Aug 03 '13 at 11:21
I think it's possible using `content:` in hover, the code should work but actually `:hover` doesn't trigger in this situation. It seems to be not working for `` — Okan Kocyigit, Aug 03 '13 at 11:25
Use anchor tag or other wise use Javascript code for change the img src onhover. Which is explained in my below post — Naveen Kumar Alone, Aug 03 '13 at 11:35
This only doesn't work for CSS2. In CSS3 your solution should work perfectly because there is no need for `:before` or `:after` pseudo classes to use `content:url(...)`. Update: This only works for Webkit / Google Chrome. — Timo Ernst, Nov 13 '13 at 14:59

score 184 · Accepted Answer · edited Mar 26 '18 at 07:54

With only html and css, its not posible to change the src of image. If you do replace the img tag with div tag, then you might be able to change the image that is set as the background as like

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

And if you think you can use some javascript code then you should be able to change the src of the img tag as below

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

In addition, if you use the CSS option, in case you do not want the image to 'flicker' into view while it needs to load on hover, you can preload it on your page by putting it somewhere hidden: `` — Steven Jeuris, Jul 28 '18 at 19:04

Surya R Praveen · Answer 2 · 2016-09-09T14:56:45.180

133

I have modified few changes related to Patrick Kostjens.

<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>

DEMO

http://jsfiddle.net/ssuryar/wcmHu/429/

edited Sep 09 '16 at 14:56

answered May 19 '14 at 09:17

Surya R Praveen

3,393
1
24
25

1

The Console and Network does not show any activity. The only way I can understand this happening is because it is cashed and that this is a simple and a valid answer. – 3xCh1_23 Oct 30 '20 at 15:20
You can also replace the "this" by "document.getElementById" or class, in order to target another img src. – Lal Apr 26 '22 at 07:26

score 40 · Answer 3 · answered May 27 '16 at 14:13

Here is an alternate approach using pure CSS. The idea is to include both the images in the HTML markup and have these displayed or hidden accordingly on :hover

HTML

<a>
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" /> 
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>

CSS

a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}

jsfiddle: https://jsfiddle.net/m4v1onyL/

Note that the images used are of the same dimensions for proper display. Also, these images file sizes are quite small so loading multiple is not an issue in this case but may be if you are looking to toggle display of large sized images.

@putvande the approach may be similar but this is a complete and simplified working example that makes better use of CSS selectors — Canica, May 27 '16 at 14:58
This solution also allows you to still make use of the srcset attribute of img, needed for crisp images on retina displays. — bsigma1, Aug 14 '20 at 04:43

MichaelC · Answer 4 · 2015-01-12T22:04:09.757

I had a similar problem but my solution was to have two images, one hidden (display:none) and one visible. On the hover over a surrounding span, the original image changes to display:none and the other image to display:block. (Might use 'inline' instead depending on your circumstances)

This example uses two span tags instead of images so you can see the result when running it here. I didn't have any online image sources to use unfortunately.

#onhover {
  display: none;
}
#surround:hover span[id="initial"] {
  display: none;
}
#surround:hover span[id="onhover"] {
  display: block;
}

<span id="surround">
    <span id="initial">original</span>
    <span id="onhover">replacement</span>
</span>

FYI, you can say `span#initial` in place of `span[id="initial"]` — Adam Katz, Jan 12 '15 at 21:59

score 16 · Answer 5 · answered Aug 03 '13 at 11:37

What you could do is cheat a little bit by setting width and height to 0 to hide the actual image and apply some CSS to do what you want:

#aks {
    width:0px;
    height:0px;
    background:url('http://dummyimage.com/100x100/000/fff');
    padding:50px;
}

#aks:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

And the padding making the img tag the size you want it to have (half the size of your actual image).

Fiddle

why would you do this over using a DIV? – gdbj Dec 08 '16 at 22:43 — gdbj, Dec 08 '16 at 22:43

Anonymous · Answer 6 · 2018-12-15T14:58:59.423

Concerning semantics, I do not like any solution given so far. Therefore, I personally use the following solution:

.img-wrapper {
  display: inline-block;
  background-image: url(https://www.w3schools.com/w3images/fjords.jpg);
}

.img-wrapper > img {
  vertical-align: top;
}

.img-wrapper > img:hover {
  opacity: 0;
}

<div class="img-wrapper">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />
</div>

This is a CSS only solution with good browser compatibility. It makes use of an image wrapper that has a background which is initially hidden by the image itself. On hover, the image is hidden through the opacity, hence the background image becomes visible. This way, one does not have an empty wrapper but a real image in the markup code.

score 6 · Answer 7 · answered Aug 03 '13 at 12:43

6

I have one more solution. If anybody uses AngularJs : http://jsfiddle.net/ec9gn/30/

<div ng-controller='ctrl'>
    <img ng-mouseover="img='eb00eb'"  ng-mouseleave="img='000'"
         ng-src='http://dummyimage.com/100x100/{{img}}/fff' />
</div>

The Javascript :

function ctrl($scope){
    $scope.img= '000';
}

No CSS ^^.

answered Aug 03 '13 at 12:43

Chalisi

165
1
4

1

If OP doesn't want Javascript, it's hardly likely that a solution using a JS framework is relevant right? – Sharadh May 19 '14 at 09:19
1

Even better (if nobody minds using Angular for this): http://jsfiddle.net/ec9gn/420/ (added ng-init and removed controller completely). – Rahul Desai Jun 17 '15 at 13:33
good answer .... i just used ng-init="img=''" without the need to declare $scope.img – Hatem Badawi Aug 12 '20 at 09:10

Naveen Kumar Alone · Answer 8 · 2017-11-13T09:59:00.363

4

Fiddle

Agree with AshisKumar's answer,
there is a way to change image url on mouse over by using jQuery functionality as below:

$(function() {
  $("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", url1); //URL @the time of mouse over on image
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", url2); //default URL
    });
 });

edited Nov 13 '17 at 09:59

answered Aug 03 '13 at 11:18

Naveen Kumar Alone

7,536
5
36
57

@Naveen And how using `a` with `display:block` differs from div? Topic starter wanted to change `src` attribute of `img` through `css` and not some walkaround. – Cthulhu Aug 03 '13 at 11:25

score 4 · Answer 9 · answered Dec 04 '13 at 07:51

I had similar problem - I want to replace picture on :hover but can't use BACKGRUND-IMAGE due to lack of Bootstrap's adaptive design.

If you like me only want to change the picture on :hover (but not insist of change SRC for the certain image tag) you can do something like this - it's CSS-only solution.

HTML:

<li>
  <img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
  <img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg">
</li>

CSS:

li { position: relative; overflow: hidden; }
li img.hoverPhoto {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
}
li.hover img { /* it's optional - for nicer transition effect */
  opacity: 0;
  -web-kit-transition:  opacity 1s ease;
  -moz-transition:  opacity 1s ease;li 
  -o-transition:    opacity 1s ease;
  transition:   opacity 1s ease;
}
li.hover img.hoverPhoto { opacity: 1; }

If you want IE7-compatible code you may hide/show :HOVER image by positioning not by opacity.

score 3 · Answer 10 · answered Aug 03 '13 at 11:22

Since you can't change the src with CSS: If jQuery is an option for you, check this fiddle.

Demo

$('#aks').hover(
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
    },
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/000/fff')
    }
)

It's basically using the .hover() method... it takes two functions to make it work. When you enter the hover and when you exit it.

We are using the .attr (short for attribute) to change the src attribute.

It's worth to note that you need the jQuery library included like in the fiddle to make this work.

score 3 · Answer 11 · answered Aug 03 '13 at 11:24

You cannot change the img src using css. You can use the following pure css solution though. HTML:

<div id="asks"></div>

CSS:

#asks {
  width: 100px;
  height: 100px;
  background-image: url('http://dummyimage.com/100x100/0000/fff');
}

#asks:hover {
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Or, if you don't want to use a div with a background image, you can use a javascript/jQuery solution. Html:

<img id="asks" src="http://dummyimage.com/100x100/000/fff" />

jQuery:

$('#asks')
  .mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');})
  .mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});

score 2 · Answer 12 · answered Mar 07 '14 at 13:38

Personally, I would go with one of the JavaScript / jQuery solutions. Not only does this keep your HTML semantic (i.e., an image is shown as an img element with it's usual src image defined in the markup), but if you use a JS / jQuery solution then you will also be able to use the JS / jQuery to preload your hover image.

Preloading the hover image will mean there is likely to be no download delay when the user hovers over the original image, resulting in your site behaving much more professionally.

It does mean you have a dependency on JS, but the tiny minority that don't have JS enabled are probably not going to be too fussed - and everyone else will get a better experience... and your code will be good, too!

score 1 · Answer 13 · answered Aug 03 '13 at 11:23

1

You can't change img tag's src attribute using CSS. Possible using Javascript onmouseover() event handler.

HTML:

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover='hover()'/>

Javascript:

function hover() {
  document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff";
}

answered Aug 03 '13 at 11:23

Praveen

55,303
33
133
164

This function works, but when user moves his mouse away from the image, image doesn't change back to original image. Can you help write that code? Thanks – Nov 07 '13 at 18:24

score 1 · Answer 14 · answered Aug 03 '13 at 11:26

For this you can use below code

1) html

<div id = "aks">

</div>

2) css

#aks
    {
        width:100px;
height:100px;    

        background-image:url('http://dummyimage.com/100x100/000/fff');}

#aks:hover {
    background-image:url('http://dummyimage.com/100x100/eb00eb/fff');

}

score 1 · Answer 15 · answered Jan 08 '14 at 01:25

On older browsers, :hover only worked on <a> elements. So you'd have to do something like this to get it to work.

<style>
a#aks
{
    width:100px;
    height:100px;
    display:block;
}

a#aks:link
{
  background-image: url('http://dummyimage.com/100x100/000/fff');
}

a#aks:hover
{
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</style>

<a href="#" id="aks"></a>

score 1 · Answer 16 · edited Apr 23 '15 at 06:06

1

The following code works at both Chrome and Firefox

<a href="#"><img src="me-more-smile.jpg" onmouseover="this.src='me-thinking-about-a-date.jpg'" onmouseout="this.src='me-more-smile.jpg'" border="0" alt=""/></a>

edited Apr 23 '15 at 06:06

Paresh Mayani

127,700
71
241
295

answered Apr 23 '15 at 06:03

Manish

11
2

score 1 · Answer 17 · answered Jun 05 '17 at 13:03

Try This Code.

   .card {

            width: 200px;

            height: 195px;

            position: relative;

            display: inline-block;

        }

        .card .img-top {

            display: none;

            position: absolute;

            top: 0;

            left: 0;
           
            z-index: 99;
width:200px;
        }

        .card:hover .img-top {

            display: inline;

        }

 <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>Image Change on Hover with CSS</title>

 
    </head>

    <body>

        <div class="card">

            <img src="http://www.dhresource.com/200x200s/f2-albu-g5-M00-EC-97-rBVaJFkAobCAHD9XAADvz9DDocA266.jpg/diy-wall-stickers-home-decor-nature-colorful.jpg" alt="Card Back" style="width:200px">

            <img src="https://s-media-cache-ak0.pinimg.com/236x/31/17/98/3117987a0be0a7d8976869aabf54d2d7.jpg" class="img-top" alt="Card Front">

        </div>

    </body>

    </html>

source: https://www.tutorialrepublic.com/codelab.php?topic=faq&file=css-image-swap-on-hover — Asad Shakeel, Dec 14 '20 at 11:19

score 0 · Answer 18 · answered Oct 29 '14 at 00:07

Heres a pure CSS solution. Put the visible image in the img tag, put the second image as a background in the css, then hide the image on hover.

.buttons{
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:2%;
}
.buttons ul{}   
.buttons ul li{
display:inline-block;
width:22%;
margin:1%;
position:relative;
}
.buttons ul li a p{
position:absolute;
top:40%;
text-align:center;
}   
.but1{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but1 a:hover img{
visibility:hidden;
}   
.but2{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but2 a:hover img{
visibility:hidden;
}   
.but3{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but3 a:hover img{
visibility:hidden;
}   
.but4{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}   
.but4 a:hover img{
visibility:hidden;
}           

<div class='buttons'>
<ul>
<li class='but1'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Blog</p></a></li>
<li class='but2'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /> <p>Herrero</p></a></li>
<li class='but3'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Loftin</p></a></li>
<li class='but4'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Contact</p></a></li>
</ul>
</div>

score 0 · Answer 19 · answered Dec 16 '14 at 14:21

0

The best way to change src for image is:

<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

See live demo: http://www.audenaerde.org/csstricks.html#imagereplacecss

Enjoy!

answered Dec 16 '14 at 14:21

Alaa.Kh

151
3

score 0 · Answer 20 · edited Apr 20 '23 at 12:08

There is another simple way using HTML and CSS only!

Just wrap your <img> tag with div like so:

<div class="image-wrapper">
    <img src="http://dummyimage.com/100x100/000/fff">
</div>

Then, in your CSS file hide the img and set the background image for the wrapping div element:

.image-wrapper:hover {
    background-image: url(http://dummyimage.com/100x100/eb00eb/fff);
    background-size: contain;
    background-repeat: no-repeat;
}

.image-wrapper:hover img {
    display: none;
}

score 0 · Answer 21 · answered Mar 15 '23 at 10:43

0

Heres a simple and best solution to change src of image

<img src="PATH" onMouseOver="this.src='PATH'" onMouseOut="this.src='PATH'" />

answered Mar 15 '23 at 10:43

Ankush Rathour

348
3
12

score 0 · Answer 22 · answered Apr 20 '23 at 12:43

0

You can use content: url() in img:hover as below

img:hover{
 content: url("https://i.stack.imgur.com/nfS5s.gif");
}

<img src="https://i.stack.imgur.com/nfS5s.gif?s=256&g=1" width="100px" alt="vinod">

answered Apr 20 '23 at 12:43

Vinod Srivastav

3,644
1
27
40

How to change source of tag on hover?

22 Answers22

Demo

Linked

Related