Add width="200" height="200" to onmouseover - html

Question

So, I currently have an image that is 400x400 pixels. When scaled externally to 200x200 it looks pixilated. I've therefore added it to Wordpress as 400x400 but scaled it down as follows:
However, I'm now trying to add an onmouseover event, with the scaled down image.
It works fine for the normal image, like this:
https://y.png'" onmouseout="this.src='https://x.png'" />
But if I try and scale the image, as follows, it doesn't work:
https://y.png' width="200" height="200"" onmouseout="this.src='https://x.png'" />
Please note I've left the source of the image out and replaced with 'x' and 'y'.
Does anyone know how to resolve this please?
Thanks all.

Answer 1

You could use the :before pseudo selector to show a background image. This will let you shrink down the 400x400 image in CSS. Run this and hover over the element.
.item {
position: relative;
overflow: hidden;
display: inline-block;
}
.item:hover:before {
content: "";
background-image: url(http://placehold.it/400x400);
background-size: 200px;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<a href="#" class="item">
<img src="http://placehold.it/200x200/8B0AB3/ffffff" />
</a>

Answer 2

You should be able to accomplish this without JavaScript.
Here's a Codepen demo: http://codepen.io/hellojason/pen/GZjpQE
In CSS:
img {
width: 200px;
transition: width 1s;
}
img:hover, img:focus {
width: 400px;
}
<img src="http://placehold.it/400x400" />
Is this what you're after?

Answer 3

Two way for this task you can use
First way using Javascript.
Script :
function bigImg(x) {
x.style.height = "400px";
x.style.width = "400px";
}
function normalImg(x) {
x.style.height = "200px";
x.style.width = "200px";
}
Html :
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="http://placehold.it/400x400" alt="Smiley" width="32" height="32">
You can call your own function from onmouseover or onmouseout function.
Second way using CSS :
CSS :
#image{
width:200px;
height:200px;
}
#image:hover{
width:400px;
height:400px;
}
Html :
<img border="0" src="http://placehold.it/400x400" alt="Smiley" id="image">