How to make image hover in css

Question

I want to change the image from normal to brighter when it s on hover  My code        lt div class  nkhome  gt           lt a href  Home html  gt  lt img src  Images btnhome png    gt  lt  a gt       lt  div gt   nkhome      margin-left 260px      top 170px      position absolute      width 59px      height 59px     nkhome a img hover       background url Images btnhomeh png       position absolute      top 0px      Why doesn t work the hover  When my mouse is on it  it shows the first image  not the hover image

User · Answer

You re setting the background of the image to another image   Which is fine  but the foreground  SRC attribute of the IMG  still overlays everything else    nkhome      margin-left 260px      top 170px      position absolute     nkhome a       background url Images btnhome png       display block     Necessary  since A is not a block element        width 59px      height 59px     nkhome a hover       background url Images btnhomeh png        lt div class  nkhome  gt       lt a href  Home html  gt  lt  a gt   lt  div gt

User · Answer

It will not work like this  put both images as background images    bg-img       background url images yourImg jpg  no-repeat 0 0      bg-img hover       background url images yourImg-1 jpg  no-repeat 0 0

User · Answer

Exact solution to your problem  You can change the image on hover by using content url  YOUR-IMAGE-PATH     For image hover use below line in your css   img hover   and to change the image on hover using the below config inside img hover   img hover  content url  https   www planwallpaper com static images 9-credit-1 jpg

User · Answer

Make on class with this  And make 2 different images with the self width and height   Works in ie9   See this link   http   kyleschaeffer com development pure-css-image-hover   Also you can 2 differents images make and place in the self class name with in the hover the another images   See example     myButtonLink                 margin-top  -5px       display  block      width  45px      height  39px      background  url  images home1 png   bottom      text-indent  -99999px                margin-left -17px                 margin-right -17px                 margin-bottom  -5px                 border-radius  3px                -webkit-border-radius  3px                 myButtonLink hover       margin-top   -5px       display  block      width  45px      height  39px                background  url  images home2 png   bottom                text-indent  -99999px                margin-left -17px                 margin-right -17px                 margin-bottom  -20x                 border-radius  3px                -webkit-border-radius  3px

User · Answer

Here are some easy to folow steps and a great on hover tutorial its the examples that you can  play  with and test live   http   fivera net simple-cool-live-examples-image-hover-css-effect

User · Answer

Hi you should give parent position relative and child absolute and give to height or width to absolute class as like this   Css     nkhome      margin-left 260px      width 59px      height 59px      margin-top 170px      position relative      z-index 0     nkhome a hover img      opacity 0 0     nkhome a hover    background url  http   www prelovac com vladimir wp-content uploads 2008 03 example jpg        width 100px      height 100px      position absolute      top 0      z-index 1       HTML    lt div class  nkhome  gt           lt a href  Home html  gt  lt img src  http   dummyimage com 100 000 fff jpg    gt  lt  a gt       lt  div gt      Live demo http   jsfiddle net t5FEX 7     or this    lt div class  nkhome  gt           lt a href  Home html  gt  lt img src  http   dummyimage com 100 000 fff jpg  onmouseover  this src  http   www prelovac com vladimir wp-content uploads 2008 03 example jpg                onmouseout  this src  http   dummyimage com 100 000 fff jpg                 gt  lt  a gt       lt  div gt     Live demo http   jsfiddle net t5FEX 9

User · Answer

Simply this  no extra div or JavaScript needed  just pure CSS  jsfiddle demo    HTML   lt a href  javascript alert  Hello     class  changesImgOnHover  gt       lt img src  http   dummyimage com 50x25 00f ff0 png amp text Hello   alt  Hello   gt   lt  a gt    CSS   changesImgOnHover       display  inline-block     or just block        width  50px      background  url  http   dummyimage com 50x25 0f0 f00 png amp text Hello    no-repeat     changesImgOnHover hover img       visibility  hidden

User · Answer

You ve got an a tag containing an img tag  That s your normal state  You then add a background-image as your hover state  and it s appearing in the background of your a tag - behind the img tag   You should probably create a CSS sprite and use background positions  but this should get you started    lt div gt       lt a href  home html  gt  lt  a gt   lt  div gt   div a       width   59px      height  59px      display  block      background-image  url  images btnhome png       div a hover       background-image  url  images btnhomeh png       This A List Apart Article from 2004 is still relevant  and will give you some background about sprites  and why it s a good idea to use them instead of two different images  It s a lot better written than anything I could explain to you

[css] How to make image hover in css?

Examples related to css

Examples related to image

Examples related to hover