Animation: How to affect the mouseOver() image

Question

In the code below, I was able to effect changes on the image/gif which I got a source for by means of CSS , making it a particular size or shape. However, I could'nt effect any change for the image that will be shown when I mouseOver. It gives me the default size and shape. I need to know a way I will carry out a change on it as well

<a class="newimg" href="C:\Users\Ak.Dell-PC\Desktop\Sublime Text 3\A.html" target="_blank">
    <img src="C:\Users\Ak.Dell-PC\Desktop\Sublime Text 3\img\9610-Flowers-In-The-Wind.gif"  alt="Visit new page!" border="1" name="flowers" onmouseover="mouseOver()" onmouseout="mouseOut()"> 
</a>

a.newimg{
    height: 300px;
    width: 300px;
    border: 1px solid orange;   
}

function mouseOver() {
    document.flowers.src="C:/Users/Ak.Dell-PC/Desktop/Sublime Text 3/img/IMG-20190112-WA0010.jpg";
}

function mouseOut() {
    document.flowers.src="C:/Users/Ak.Dell-PC/Desktop/Sublime Text 3/img/9610-Flowers-In-The-Wind.gif";

Answer 1

Use css :hover so you can alter they styles.

function mouseOver() {
  document.flowers.src = "http://placekitten.com/100/100";
}

function mouseOut() {
  document.flowers.src = "http://placekitten.com/200/300";
}

a.newimg img {
  height: 300px;
  width: 300px;
  border: 1px solid orange;
}

a.newimg:hover img {
  border-radius: 50%;
} 

<a class="newimg" href="#" target="_blank">
  <img src="http://placekitten.com/200/300" alt="Visit new page!" border="1" name="flowers" onmouseover="mouseOver()" onmouseout="mouseOut()">
</a>

And altering the images without any JavaScript

a.newimg img {
  height: 300px;
  width: 300px;
  border: 1px solid orange;
}

a.newimg img:first-child {
  display: inline;
}

a.newimg img:last-child {
  display: none;
  border-radius: 50%;
}

a.newimg:hover img:first-child {
  display: none;
}

a.newimg:hover img:last-child {
  display: block;
  border-radius: 50%;
}

<a class="newimg" href="#" target="_blank">
  <img src="http://placekitten.com/200/300" alt="Visit new page!" border="1" name="flowers">
  <img src="http://placekitten.com/100/100" alt="Visit new page!" border="1" name="flowers">
</a>