Change Image on Hover

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);" />

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

Change image on hover

Try the following code. It's working

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title><br />
    </head>

    <body>
        <p>
            <script type="text/javascript" language="javascript">
                function changeImage(img){
                   document.getElementById('bigImage').src=img;
                }
            </script>

            <img src="../Pictures/lightcircle.png" alt="Sample Image" width="284" height="156" id="bigImage" />
            <p>  </p>
            <div>
                <p>
                    <img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
                </p>
                <p><img src="../Pictures/lightcircle.png" alt="Sample Image" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>

                <p><img src="../Pictures/lightcircle2.png" alt="Sample Image" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>

                <p> </p>
                </br>
            </div>
    </body>
</html>

I modified the code, like it will work with some delay in it.. But still, it is not animating..

function changeImage(img){
    // document.getElementById('bigImage').src=img;
    setTimeout(function() {document.getElementById('bigImage').src=img;},1250);
}

change color of text, image and background on hover

Add a filter to the image only:

.hello {
  background-color: #eeeeee;
  color: #4171af;
  font-size: 20px
}

.hello:hover {
  background-color: #4171af;
  color: white;
}

.hello:hover img {
  filter: brightness(150%);
}

<div class="hello"><img src="https://i.ibb.co/HBbfCGF/play.png">bouton</div>

Placing two different images on hover with two center images side by side

I don't know what is p tags are for, so I removed those. Also, I used a div with background-image instead img tag. when you hover on the container, the image changes.

* {
  background-color: coral;
}
.flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 50vh;
}
.container {
  position: relative;
  width: 48%;
  overflow: hidden;
}

@media screen and (max-width:480px) {
  .container {
    width: 100%;
    margin-top: 20px;
  }
  .flex{
    height: 100vh;
  }
}
.img{
  background-size: 100% 100%; 
  transition: all .4s ease-in;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}
.img1{
  background-image: url('https://s4.uupload.ir/files/5c29cf910a706_8m.jpg');
}
.img2{
  background-image: url('https://s4.uupload.ir/files/717195_346_g0du.jpg');
}

a {
  color: white;
}

.container:hover .img {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  opacity: 0.5;
}
.container:hover .img1{
  background-image: url('https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg');
}
.container:hover .img2{
  background-image: url('https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg');
}

h1 {
  text-align: center;
  font-size: 72px;
  background: -webkit-linear-gradient(rgb(12, 215, 230), rgb(170, 9, 130));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1> Who is Rosalyn? </h1>
<div class="flex">
<div class="container">
  <a href="https://trezoro.co">
    <div class="img img1"></div>
  </a>
</div>
<div class="container">
  <div class="img img2"></div>
</div>
</div>

Can't replace image on hover

That's because you put the background image inline with html, so if you want to replace it via css, you must put an !important:

.settings:hover{
    background-image: url("assets/settingsH.svg")!important;
}

or bettter, put the background in css:

.settings {
  width: 2.0vw;
  height: 2.0vw;
  margin-top: calc((8vh - 2vw) / 2);
  margin-left: 1.5vw;
  float: left;
  background-position: center;
  background-size: contain;
  background-image: url("https://via.placeholder.com/400/0000FF");
}

.settings:hover {
  background-image: url("https://via.placeholder.com/400/FF0000");
}

<div class="settings" id="settings"></div>

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 picture inside img on hover with css

Use content:url("imageURL"); Note[ This method only works in chrome not in Firefox or IE ].

.image{  width:100px;  height:100px;}
.image:hover{    content:url("http://via.placeholder.com/350x150");}

<img class="image"/>