Changing Image on Hover With Css/Html

Changing image on hover with CSS/HTML

One solution is to use also the first image as a background image like this:

<div id="Library"></div>

#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;
}

How to change source of img tag on hover?

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

function hover(element) {  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');}
function unhover(element) {  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');}

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

How to Change Image on hover

My best attempt so far is the following. This works okay but it does distort images that are very tall. Can anyone suggest improvements?

JSFiddle: https://jsfiddle.net/4hrvxpe2/26/

.small{
    max-width: 10%;
    height: 100px;
    min-width: 10%!important;
}

.smallerImages{
margin: 0 auto;
}

#mainPicture{
width:  100%;
height: 600px;
display: table; margin: 0 auto;
}

Is it possible to change img src by hover on another element by CSS

You almost have it. Change 'content' to 'background' and use a transparent image for the image src

a.template-image[href^="/template-1978944"] div.green:hover ~ img { content: url(http://lorempixel.com/100/100/sports/);"}
a.template-image[href^="/template-1978944"] div.orange:hover ~ img { content: url(http://lorempixel.com/100/100/cats/);"}
a.template-image[href^="/template-1978944"] div.red:hover ~ img { content: url(http://lorempixel.com/100/100/nature/);"}

<a class="template-image" href="/template-1978944/editor"> <div class="green">GREEN</div> <div class="red">RED</div> <div class="orange">ORANGE</div> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="></a>

Change image when hovering over li and keep that image permanent using CSS

Here is another way to do it with jQuery. You will have to load in your own images to really see it work.

Here is the working fiddle!

https://jsfiddle.net/ur7tns7L/

I took away

    $(#element).on("mouseleave",function(){


});

This makes the image permanent until another is hovered over.

changing image in different div on hover

You could do it in a similar way to the way the background is changed. The property you need to update is 'content' and you set it to "url(http://someimage.com)"

So you would have a function like

  function changeURL(imgURL) {
    document.getElementById('b').style.content = `url(${imgURL})`;
  }

And then on the div #a you can have

onmouseover="changeURL(url1)" onmouseout="changeURL(url2)"

Changing Image on Hover With Css/Html