CODEWITHSUNDEEP
html
Tom
Tom

Reputation: 11

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

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.

Upvotes: 0

Views: 1408

Answers (3)

hellojason
hellojason

Reputation: 314

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>

Upvotes: 1

A.K.
A.K.

Reputation: 2322

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">

Upvotes: 0

hellojason
hellojason

Reputation: 314

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?

Upvotes: 0

Related Questions