Extend image when the cursor is hover it (in CSS)

Question

Hello,
I need help for a code I don't get. I have to extend an image when the cursor is over it, as I said in the title, but I need to do it in CSS (school reason) and I didn't find the code who can do it.
I saw there is a code like "img:hover" for CSS but that is not working.

Thanks for your help !

Answer 1

img:hover{
width: newWidth;
height: newHeight;
}
It is what you need ?

Answer 2

Oh, this isn't a problem, look:
img{
content: url("yourlittlerimg.jpg");
}
img:hover {
content: url ("yourbiggerimg.jpg");
}

Answer 3

Yes, it is exactly the same way ;)
You're welcome :)

Answer 4

I don't know, it seems good. :/
I tried with two images ans it work fine for me.
I just know the .zoom { content: ect } isn't necessary if you filled the src attribute :/
It is maybe the space between url and ("yourbiggerimg"); ? (I tried to put space at this place in my code and it didn't work :o )

Answer 5

http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_image

Answer 6

Bl4ckout, the service is apparently unavailable.
volts : the fact is that I have 2 images one bigger than the other. the bigger one must appear when the cursor is over the smaller image.. but thanks for your response

Answer 7

thank you very much ! just if I want to associate this to a class shall I do :
.class{
content: url("yourlittlerimg.jpg");
}
.class:hover {
content: url ("yourbiggerimg.jpg");
}
? thank you very much Volts !

Answer 8

That doesn't work, I probably made a mistake but I don't find it.. if you can help me :
The fraction of HTML to set the image :

<div id="position"> <img class="zoom" src="littleimg.gif"> </div>

the CSS:
.zoom{
content: url("littleimg.gif");
}
.zoom:hover {
content: url ("yourbiggerimg.jpg");
}

Thanks for your help again :')

Answer 9

ok so a friend of me sent me that and that work :
CSS:
#unf {
z-index: 0;
visibility: visible;
margin: 0;
left: 120px;
top: 50px;
width:69px;
height:69px;
background-image: url(biggerimage.gif);
background-position: 55px 130px 0 0;
}

#unf:hover {
height: 275px;
width: 275px;
}

#unf:hover img {
visibility: hidden;
}
______________________________________
and the html:
<div class="position" id="unf">

<img src="smallerimage.gif">

</div>