How to see image bigger when I hover/click over the image

[newcoder1010]

Hi,

I have the body field as follows:

		<li>On the <strong>Domain </strong>page, click the domain name that you want to forward to your Youtube page.</li>


<img src="http://xxx.com/img/Howto_1.png" alt="how to connect your domain to your youtube url" />

		<li>On the <strong>Domain </strong>page, click the domain name that you want to forward to your Youtube page.</li>

<img src="http://xxx.com/img/Howto2.png" alt="how to connect your domain to your youtube url" />

CSS:

 img{    border: 1px solid #cdc9c9;padding: 40px;max-width:85%;}

When I visit the page, I see image as I described above. Question is when I hover/click on image, how can I see the image in bigger version.

Please advise.

[davej]

See...

http://www.w3schools.com/cssref/sel_hover.asp

[dsonesuk]

With hover you can use css3 transition with transform: scale() to increase size on hover, with click you require JavaScript to apply class name that uses transition and transform, else you use JavaScript to open larger version of image in a pop-up specific element layout, which only becomes visible when specific element class click event triggers it to appear.

[Ingolme]

I would advise not using "xxx.com" as a placeholder URL (especially at your job). People have gotten into unpleasant situations before because of that.

 

Example.com is reserved by the ICANN for tthis purpose.