CSS Change image src on img hover

Question

I need to change  lt img gt  source URL on hover  I have tried this but won t work   HTML  lt img id  quot my-img quot  src  quot http   dummyimage com 100x100 000 fff quot   gt   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

User · Answer

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.

User · Answer

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   x000D   x000D  function hover element    x000D    element setAttribute  src    http   dummyimage com 100x100 eb00eb fff    x000D    x000D   x000D  function unhover element    x000D    element setAttribute  src    http   dummyimage com 100x100 000 fff    x000D    x000D   lt img id  my-img  src  http   dummyimage com 100x100 000 fff  onmouseover  hover this    onmouseout  unhover this      gt  x000D   x000D   x000D

User · Answer

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

User · Answer

You cannot change the img src using css  You can use the following pure css solution though   HTML    lt div id  asks  gt  lt  div gt    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    lt img id  asks  src  http   dummyimage com 100x100 000 fff    gt    jQuery       asks      mouseenter function       asks   attr  src    http   dummyimage com 100x100 eb00eb fff         mouseleave function       asks   attr  src    http   dummyimage com 100x100 000 fff

User · Answer

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

User · Answer

There is another simple way using HTML and CSS only Just wrap your  lt img gt  tag with div like so   lt div class  quot image-wrapper quot  gt       lt img src  quot http   dummyimage com 100x100 000 fff quot  gt   lt  div gt   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     Et voil

User · Answer

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

User · Answer

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

User · Answer

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                 lt div class  buttons  gt   lt ul gt   lt li class  but1  gt  lt a href     gt  lt img src  scalesb jpg  height  300  width  300  alt      gt  lt p gt Blog lt  p gt  lt  a gt  lt  li gt   lt li class  but2  gt  lt a href     gt  lt img src  scalesb jpg  height  300  width  300  alt      gt   lt p gt Herrero lt  p gt  lt  a gt  lt  li gt   lt li class  but3  gt  lt a href     gt  lt img src  scalesb jpg  height  300  width  300  alt      gt  lt p gt Loftin lt  p gt  lt  a gt  lt  li gt   lt li class  but4  gt  lt a href     gt  lt img src  scalesb jpg  height  300  width  300  alt      gt  lt p gt Contact lt  p gt  lt  a gt  lt  li gt   lt  ul gt   lt  div gt

User · Answer

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    x000D   x000D   onhover   x000D    display  none  x000D    x000D   surround hover span id  initial     x000D    display  none  x000D    x000D   surround hover span id  onhover     x000D    display  block  x000D    x000D   lt span id  surround  gt  x000D       lt span id  initial  gt original lt  span gt  x000D       lt span id  onhover  gt replacement lt  span gt  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

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   lt a gt      lt img src  https   cdn4 iconfinder com data icons imoticons 105 imoticon 15-128 png    gt       lt img src  https   cdn4 iconfinder com data icons imoticons 105 imoticon 12-128 png    gt   lt  a gt    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

User · Answer

For this you can use below code  1  html   lt div id    aks  gt    lt  div gt    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

User · Answer

Concerning semantics  I do not like any solution given so far  Therefore  I personally use the following solution    x000D   x000D   img-wrapper   x000D    display  inline-block  x000D    background-image  url https   www w3schools com w3images fjords jpg   x000D    x000D   x000D   img-wrapper  gt  img   x000D    vertical-align  top  x000D    x000D   x000D   img-wrapper  gt  img hover   x000D    opacity  0  x000D    x000D   lt div class  img-wrapper  gt  x000D     lt img src  https   www w3schools com w3css img lights jpg  alt  image    gt  x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

On older browsers   hover only worked on  lt a gt  elements   So you d have to do something like this to get it to work    lt style gt  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       lt  style gt    lt a href     id  aks  gt  lt  a gt

User · Answer

The following code works at both Chrome and Firefox   lt a href     gt  lt 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     gt  lt  a gt

User · Answer

The best way to change src for image is    lt img src  willbehidden png  style  width 0px  height 0px  padding  8px  background  url newimage png    gt    See live demo  http   www audenaerde org csstricks html imagereplacecss  Enjoy

User · Answer

I have modified few changes related to Patrick Kostjens    lt a href     gt   lt 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     gt  lt  a gt    DEMO  http   jsfiddle net ssuryar wcmHu 429

User · Answer

You can t change img tag s src attribute using CSS   Possible using Javascript onmouseover   event handler   HTML    lt img id  my-img  src  http   dummyimage com 100x100 000 fff  onmouseover  hover     gt    Javascript   function hover       document getElementById  my-img   src    http   dummyimage com 100x100 eb00eb fff

User · Answer

I have one more solution  If anybody uses AngularJs       http   jsfiddle net ec9gn 30    lt div ng-controller  ctrl  gt       lt img ng-mouseover  img  eb00eb    ng-mouseleave  img  000            ng-src  http   dummyimage com 100x100   img   fff    gt   lt  div gt    The Javascript    function ctrl  scope        scope img   000       No CSS

User · Answer

Try This Code    x000D   x000D      card   x000D   x000D              width  200px  x000D   x000D              height  195px  x000D   x000D              position  relative  x000D   x000D              display  inline-block  x000D   x000D            x000D   x000D           card  img-top   x000D   x000D              display  none  x000D   x000D              position  absolute  x000D   x000D              top  0  x000D   x000D              left  0  x000D              x000D              z-index  99  x000D  width 200px  x000D            x000D   x000D           card hover  img-top   x000D   x000D              display  inline  x000D   x000D            x000D    lt  DOCTYPE html gt  x000D   x000D       lt html lang  en  gt  x000D   x000D       lt head gt  x000D   x000D       lt title gt Image Change on Hover with CSS lt  title gt  x000D   x000D    x000D       lt  head gt  x000D   x000D       lt body gt  x000D   x000D           lt div class  card  gt  x000D   x000D               lt 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  gt  x000D   x000D               lt img src  https   s-media-cache-ak0 pinimg com 236x 31 17 98 3117987a0be0a7d8976869aabf54d2d7 jpg  class  img-top  alt  Card Front  gt  x000D   x000D           lt  div gt  x000D   x000D       lt  body gt  x000D   x000D       lt  html gt  x000D   x000D   x000D

[html] CSS: Change image src on img:hover

Examples related to html

Examples related to css