Changing image on hover with CSS HTML

Question

I have this problem where I have set an image to display another image when the mouse hovers over  however the first image still appears and the new one doesn t change height and width and overlaps the other one  I m still pretty new to HTML CSS so I may have missed something simple  Here is the code    lt img src  LibraryTransparent png  id  Library  gt     Library       height  70px      width  120px      Library hover       background-image  url  LibraryHoverTrans png        height  70px      width  120px

User · Answer

Use content    Library       height  70px      width  120px      Library hover       content  url  http   www furrytalk com wp-content uploads 2010 05 2 jpg        height  70px      width  120px      JSFiddle

User · Answer

With everyones answer using the background-image option they re missing one attribute  The height and width will set the container size for the image but won t resize the image itself  background-size is needed to compress or stretch the image to fit this container  I ve used the example from the  best answer    lt div id  Library  gt  lt  div gt   Library      background-image  url  LibraryTransparent png       background-size  120px     height  70px     width  120px      Library hover      background-image  url  LibraryHoverTrans png

User · Answer

Change the img tag to a div and give it a background in CSS

User · Answer

Use  quot content   quot  at the hover This works

User · Answer

Just use Photoshop and create two of the same image  the 1st one being how you want it to look  the 2nd being how you want it to look when it s hovered over  I m wrapping the image in an  lt a gt  tag  because I m assuming that it s what you want  For this example I m doing a facebook icon which is desaturated  but when hovered over it will show the blue color of facebook    lt a href  www facebook com  gt  lt img src  place of 1st image  onmouseover  this src  place of 2nd image   onmouseout  this src  place of 1st image   gt  lt  a gt

User · Answer

Another option is to use JS    lt img src  LibraryTransparent png  onmouseover  this src  LibraryHoverTrans png    onmouseout  this src  LibraryTransparent png      gt

User · Answer

You can t use CSS to change image SRC attributes  unless the browser supports it   You may want to use jQuery with the hover event       Library    hover      function                 this  attr  src   isHover jpg               function                this  attr  src   notHover jpg

User · Answer

What I usually do is that I create a double image with both states  acting like kind of a two-frame film which I then use with as background for the original element so that the element has width   height set in pixels  resulting in showing only one half of the image   Then what the hover state defines is basically  move the film to show the other frame    For example  imagine that the image has to be a gray Tux  that we need to change to colorful Tux on hover   And the  hosting  element is a span with id  tuxie     I create 50 x 25 image with two Tuxes  one in color and other gray  then assign the image as a background for a 25 x 25 span  and finally set the hover to simply move the background 25px left    The minimal code    lt style gt       tuxie           width  25px  height  25px          background  url  images tuxie png   no-repeat left top             tuxie hover   background-position  -25px 0px    lt  style gt    lt div id  tuxie    gt    and the image     Advantages are    By putting both frames in one file  it s ensured that they are loaded at once   This avoids the ugly glitch on slower connections when the other frame never loads immediately  so first hover never works properly  It may be easier to manage your images this way since  paired  frames are never confused  With smart use of Javascript or CSS selector  one can extend this and include even more frames in one file   In theory you could put even multiple buttons in single file and govern their display by coordinates  although such approach could get quickly out of hand    Note that this is built with background CSS property  so if you really need to use with  lt img   gt s  you must not set the src property since that overlaps the background   Come to think that clever use of transparency here could lead to interesting results  but probably very dependent on quality of image as well as of the engine

User · Answer

x000D   x000D   hover image hover  text-decoration  none     Optional  avoid undesired underscore if a is used as wrapper     x000D   hide  display none  x000D     Do the shift     x000D   hover image hover img first-child display none  x000D   hover image hover img last-child display inline-block  x000D   lt body gt   x000D       lt a class  hover image  href     gt  x000D           lt  -- path to first visible image  -- gt  x000D           lt img src  http   farmacias dariopm com cc2  cc3 images f1 silverstone 2016 jpg    gt  x000D           lt  -- path to hover visible image  -- gt  x000D           lt img src  http   farmacias dariopm com cc2  cc3 images f1 malasia 2016 jpg  class  hide    gt  x000D       lt  a gt  x000D   lt  body gt  x000D   x000D   x000D    To try to improve this Rashid s good answer I m adding some comments   The trick is done over the wrapper of the image to be swapped  an  a  tag this time but maybe another  so the  hover image  class has been put there   Advantages    Keeping both images url together in the same place helps if they need to be changed  Seems to work with old navigators too  CSS2 standard   It s self explanatory  The hover image is preloaded  no delay after hovering

User · Answer

Here is the simple trick  Just copy and paste it    lt  DOCTYPE html gt       lt html lang  en  gt       lt head gt       lt title gt Change Image on Hover in CSS lt  title gt       lt style type  text css  gt           card               width  130px              height  195px              background  url     images card-back jpg   no-repeat              margin  50px                     card hover               background  url     images card-front jpg   no-repeat                 lt  style gt       lt  head gt       lt body gt           lt div class  card  gt  lt  div gt       lt  body gt       lt  html gt

User · Answer

You can replace the image of an HTML IMG without needing to make any background image changes to the container div   This is obtained using the CSS property box-sizing  border-box   It gives you a possibility to put a kind of hover effect on an  lt IMG gt  very efficiently    To do this  apply a class like this to your image    image-replacement     display  block    -moz-box-sizing  border-box    box-sizing  border-box    background  url http   akamaicovers oreilly com images 9780596517748 cat gif  no-repeat    this image will be shown over the image iSRC      width  180px    height  236px    padding-left  180px      Sample code  http   codepen io chriscoyier pen cJEjs  Original article  http   css-tricks com replace-the-image-in-an-img-with-css   Hope this will help some of you guys who don t want to put a div to obtain an image having a  hover  effect   Posting here the sample code   HTML    lt img id  myImage  src  images photo1 png  class  ClassBeforeImage-replacement  gt    jQuery       myImage   mouseover function            this  attr  class    image-replacement            myImage   mouseout function            this  attr  class    ClassBeforeImage-replacement

User · Answer

My jquery solution   function changeOverImage element            var url     element  prop  src                url over     element  data  change-over                        element               prop  src   url over               data  change-over   url                        document  delegate  img data-change-over     mouseover   function              changeOverImage this                 document  delegate  img data-change-over     mouseout   function              changeOverImage this             and html   lt img src  https   placeholdit imgix net  text txtsize 33 amp txt  3Cimg 20original 20  3E amp w 342 amp h 300  data-change-over  https   placeholdit imgix net  text txtsize 33 amp txt  3Cimg 20over 20  3E amp w 342 amp h 300    gt    Demo  JSFiddle demo  Regards

User · Answer

try one of them       lt img src  images icons proceed button png  width  120  height  70  onmouseover  this src  images icons proceed button2 png    onmouseout  this src  images icons proceed button png      gt       or if you using image as a button in form    lt input type  image  id  proceed  src  images icons proceed button png  alt Go to Facebook page  onMouseOver  fnover    onMouseOut  fnout     onclick  fnclick    gt  function fnover                         var myimg2   document getElementById  proceed                myimg2 src    images icons proceed button2 png                      function fnout                         var myimg2   document getElementById  proceed                myimg2 src    images icons proceed button png

User · Answer

What I would recommend is to use only CSS if possible   My solution would be    HTML     lt img id  img  class    src      gt    CSS   img img      background  url  pictureNumberOne png        background-size  100px 100px         Optional transition         transition  background 0 25s ease-in-out    img img hover      background  url  pictureNumberTwo png        background-size  100px 100px      That  not defining the src attribute  also ensures that transparent images  or images with transparent parts  are shown correctly  otherwise  if the second pic would be half-transparent  you would also see parts of the first picture     The background-size attribute is used to set the height and width of a background-image   If  for any reason  you don t want to change the bg-image of an image  you could also put the image in a div-container as following    HTML    lt div id  imgContainer  class    gt       lt img id    class    src      gt   lt  div gt        and so on

User · Answer

One solution is to use also the first image as a background image like this    lt div id  Library  gt  lt  div gt       Library      background-image  url  LibraryTransparent png       height  70px     width  120px      Library hover      background-image  url  LibraryHoverTrans png        If your hover image has a different size  you ve got to set them like so    Library hover      background-image  url  LibraryHoverTrans png       width   IMAGE WIDTH IN PIXELS px     height   IMAGE HEIGHT IN PIXELS px

User · Answer

check this fiddle  I think the image path may be wrong in your case  the syntax looks right  background-image url  http   www bluecowcreative ca wp-content uploads 2013 08 hi jpg

User · Answer

The problem with all the previous answers is that the hover image isn t loaded with the page so when the browser calls it  it takes time to load and the whole thing doesn t look really good   What I do is that I put the original image and the hover image in 1 element and hide the hover image at first  Then at hover in I display the hover image and hide the old one  and at hover out I do the opposite   HTML    lt span id  bellLogo  onmouseover  hvr this   in    onmouseleave  hvr this   out    gt     lt img src  stylesheets images bell png  class bell col  g  gt     lt img src  stylesheets images bell hover png  class bell style  display none  col  b  gt   lt  span gt    JavaScript jQuery   function hvr dom  action        if  action     in                   dom  find   col g    css  display    none              dom  find   col b    css  display    inline-block               else                 dom  find   col b    css  display    none              dom  find   col g    css  display    inline-block              This to me is the easiest and most efficient way to do it

User · Answer

Live Example  JSFiddle  The Accepted answer has some problem  The image wasn t resized there  Use background-size property for resizing the image   HTML    lt div id  image  gt  lt  div gt    CSS    image      background-image  url  image1       background-size  300px 390px     width  300px     height 390px      image hover    background  url  image2      background-size  300px 390px

User · Answer

x000D   x000D   foo img last-child display none  x000D   foo hover img first-child display none  x000D   foo hover img last-child display inline-block  x000D   lt body gt   x000D       lt a class  foo  href     gt  x000D           lt img src  http   lojanak com image 9 280 280 1 0    gt  x000D           lt img src  http   lojanak com image 0 280 280 1 0    gt  x000D       lt  a gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

I had a similar problem   With my button defined like    lt button  id  myButton  class  myButtonClass  gt  lt  button gt    I had the background styling like this    myButton  background-image url img picture jpg     myButtonClass background-image url img picture jpg     myButtonClass hover background-image url img picture hover jpg     When I switched it to    myButton     myButtonClass background-image url img picture jpg     myButtonClass hover background-image url img picture hover jpg     The hover over feature worked just fine      not addressing other attributes like size and position of image or of container  just the background image changing

User · Answer

In the way that you re doing things  it won t happen  You re changing the background image of the image  which is being blocked by the original image  Changing the height and width also won t happen  To change the src attribute of the image  you would need Javascript or a Javascript Library such as jQuery  You could however  change the image to a simple div  text  box  and have a background image that changes on hover  even though the div box itself will be empty  Here s how    lt div id  emptydiv  gt  lt  div gt    emptydiv    background-image  url  LibraryHover png    height  70px  width  120px        emptydiv hover    background-image  url  LibraryHoverTrans png    height  700px  width  1200px       I hope this is what you re asking for

User · Answer

The problem is that you set the first image through  src  attribute and on hover added to the image a background-image  try this   in html use     lt img id  Library  gt    then in css    Library       height  70px      width  120px      background-image  url  LibraryTransparent png        Library hover       background-image  url  LibraryHoverTrans png

[html] Changing image on hover with CSS/HTML

Examples related to html

Examples related to css

Examples related to image

Examples related to hover