CSS Styling: How to change the image when it is hovered over?

Question

I am trying to make a hovering effect on an image when it's hovered over it will change to another picture. I can't seem to get it to work when I'm not using the anchor tag. My goal is to have the picture change when I hover over a button, which I believe will require some jQuery magic. Here is my code for just trying to change the image when hovered over but somehow not working. Am I missing something?

HTML
<div>
<img src="images/newpic.png" class="img-circle homeimage" alt="Responsive image"/> 
</div>

CSS
.homeimage {
    height:200px;
    width: auto;
    background-image: url('../images/newpic.png');
}

.homeimage:hover {
    background-image: url('../images/funnypic.png');
}

you want to change the hover background image or image in html ? — PRAH, Feb 23 '15 at 05:52
possible duplicate of [Changing image on hover with css/html](http://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html) — tachyonflux, Feb 23 '15 at 06:02

ZEE · Answer 1 · 2015-02-23T06:00:29.250

2

here is an exmple using Jquery : this allows you to use hover with an image tag whatever the container is :

Jquery

$(document).ready(function () {
    $('.imgh')
        .mouseover(function () {
        $(this).attr("src", "http://taditdash.files.wordpress.com/2014/01/tadit-dash.jpg");
    })
        .mouseout(function () {
        $(this).attr("src", "http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif");
    });
});

HMTL

<img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="rajkumar" class="imgh"></img>

Live Demo

edited Feb 23 '15 at 06:00

answered Feb 23 '15 at 05:55

ZEE

5,669
4
35
53

Thanks a bunch! For some reason all the css options weren't working, but the jQuery worked like a charm. jQuery magic too strong. – TL12321 Feb 24 '15 at 01:16

score 2 · Answer 2 · answered Feb 23 '15 at 05:55

This wont work because you are putting the class on an image tag try making the img into a div and give it a height and width check out this js fiddle

.container{
    width 100%;
    height: 500px;
}

.picture {
    height:500px;
    width: 500px;
    background-image: url('http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg');
    background-repeat:no-repeat;
}

.picture:hover {
    background-image: url('http://www.online-image-editor.com//styles/2014/images/example_image.png');
}

<div class="container">
    <div class="picture">
        
    </div>
    
</div>

http://jsfiddle.net/kriscoulson/a0dodtjn/1/

score 2 · Answer 3 · answered Feb 23 '15 at 05:57

You can be solved only with CSS.

HTML

<img class="img-circle homeimage" alt="Responsive image"/>

CSS

.homeimage {
    height:200px;
    width: auto;
    background: url('https://www.google.co.kr/images/hpp/lightbulb-icon-39x39.png') no-repeat;
}

.homeimage:hover {
    background: url('http://www.google.com/images/logos/url_shortener_logo.gif') no-repeat;
}

DEMO : http://jsfiddle.net/ymyL949n/

score 2 · Answer 4 · answered Feb 23 '15 at 05:58

If you want to change the img which is called from html you can try this solution without jquery and javascript. http://jsbin.com/sujigakeru/8/edit

HTML

 <div class="container">

    <div class="content">
      <img src="http://www.makemenoise.com/wp-content/uploads/2012/08/wordpress-logo-200x200.png" alt="Responsive image"/> 
    </div>

    <div class="hover">
      <img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" alt="">
    </div>

  </div>

CSS

.container{
  width:200px;
  height:200px;
  position:relative;

}
.hover{
  display:none;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}
.container:hover .hover{
  display:block;
}

score 1 · Answer 5 · answered Feb 23 '15 at 05:58

You can achieve this using css too. you need to change the background image on hover of a button:

CSS:

img {
    display:block;
    width:400px;
    height:300px;
    background-image:url("http://lorempixel.com/600/200/sports/1/")
}
.css:hover ~ img {
    background-image:url("http://lorempixel.com/600/200/sports/2/")
}

<button class="css">CSS</button>
<img src="/image.png" />

Make sure the element order is maintained. Button should come first before image.

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/573/

CSS Styling: How to change the image when it is hovered over?

5 Answers5