0

How would I go about creating a CSS box, which when the cursor is hovering over, it turns into another image? I have this so far, can't seem to figure it out. I've got it to be a click to change one, but not a hover over one.

<img src="link.jpg"
width="150"
height="150" 
border="1 px"/>
user3228376
  • 1
  • 1
  • possible duplicate of [Changing image on hover with css/html](http://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html) – Konstantin Aug 12 '14 at 18:32
  • Like the comment above - You could use a plain `
    ` with a `background-image` set, and swap it out on `:hover` (http://jsfiddle.net/evanbriggs/34n8npan/) or if you're stuck using plain images you could get creative. http://jsfiddle.net/evanbriggs/5zsv1pde/
     – Evan Aug 12 '14 at 18:35
  • @Evan the HTML code on the site simply gives me an image, with another image below it – user3228376 Aug 12 '14 at 18:56
  • Cool, are they wrapped in a container or anything? Basically the second fiddle I linked has the second image to be revealed hidden under the first image, when the first image is hovered, it's hidden and reveals the second image. ( you could also sort this out with some `z-index` if needed. Just make sure the wrapper / parent container is relatively positioned like the fiddle ) @ http://jsfiddle.net/evanbriggs/5zsv1pde/ – Evan Aug 12 '14 at 18:59
  • Ah whoops - just need to set those `` to `display: block / inline-block;` or set a width / height on the div that's containing them and it should sort it out. http://jsfiddle.net/evanbriggs/wxzrmbap/ – Evan Aug 12 '14 at 19:23
  • @Evan tried that, the image no longer lines up, image one is now on the top-left of image two, and the same issues remains – user3228376 Aug 12 '14 at 20:08
  • Are the two images contained within a `
    `? Anyway to checkout what you're working on?
     – Evan Aug 12 '14 at 20:11
  • @Evan yes, they are. It either breaks the webpage, or doesn't work xD Using the Weebly editor, custom HTML tool. Appreciate the help. – user3228376 Aug 12 '14 at 20:15
  • Huh, hmm, well you could use 1 `` inside the `
    ` and set a `background-image` to the `
    ` - then, when you hover over the `` / `
    `, have it `display: none;` to reveal the background of the containing `
    ` ?
     – Evan Aug 12 '14 at 20:22
  • @Evan Hm, not really catching that. I think I'll just move on, cheers for the help though! – user3228376 Aug 12 '14 at 20:30
  • Anytime - but for future reference, Like this - http://jsfiddle.net/evanbriggs/d24gujw5/1/ – Evan Aug 12 '14 at 20:37

2 Answers2

0

Use css background-image on a div instead of img

.your-class {
  width: 150px;
  height: 150px;
  background-image: (/fakepath/image.jpg);
}
.your-class:hover {
  background-image: (/fakepath/another-image.jpg);
}
Mihey Egoroff
  • 1,542
  • 14
  • 23
0

Like the other anwers - You could use a plain <div> with a background-image set, and swap it out on :hover (jsfiddle.net/evanbriggs/34n8npan) or if you're stuck using plain <img>s you could get creative -

HTML

<div>
    <img src="http://placehold.it/250x250&text=Image One" />
    <img src="http://placehold.it/250x250&text=Image Two" />
</div>

CSS

div {
    position: relative;
}
div img {
    display: block;
}
div img:first-child {
    position: absolute;
    top: 0;
    left: 0;
}
div:hover img:first-child {
    display: none;
}

http://jsfiddle.net/evanbriggs/2gvzq9eo/

Evan
  • 1,196
  • 7
  • 10