Question

49

How to expand an image in HTML by clicking on it

rated 0 times [ 50] [ 1] / answers: 1 / hits: 83349 / 11 Years ago, mon, september 30, 2013, 12:00:00

I have an image in my html page.

<img src=http://s3-media1.ak.yelpcdn.com/bphoto/sMONYSiLUQEvooJ5hZh0Sw/l.jpg alt= width=200 height=150>

How can I show it enlarged in the same page by clicking on it?.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lindsay

Add To Favorites

Follow

Total Points: 402

Total Questions: 109

Total Answers: 109

Location: Tuvalu

Member since Sat, Feb 11, 2023

1 Year ago

lindsay questions

1 Why does React Native app crash when clicking on debug in Android emulator?

Thu, Jan 13, 22, 00:00, 2 Years ago

1 Reason: `object` ([object Date]) cannot be serialized as JSON. Please only return JSON serializable data types

Wed, Dec 22, 21, 00:00, 3 Years ago

1 Slick slider not working when initialSlide is set

Tue, Sep 8, 20, 00:00, 4 Years ago

1 TypeError: this.props.* is not a function

Sat, Jun 6, 20, 00:00, 4 Years ago

1 Add image files into react state using 'useState'

Thu, Apr 30, 20, 00:00, 4 Years ago

View All

answered 11 Years ago mari · Accepted Answer

I think this will help you

<img src=http://s3-media1.ak.yelpcdn.com/bphoto/sMONYSiLUQEvooJ5hZh0Sw/l.jpg class=img alt= width=200 height=150>





.img:hover{

    color: #424242; 

  -webkit-transition: all .3s ease-in;

  -moz-transition: all .3s ease-in;

  -ms-transition: all .3s ease-in;

  -o-transition: all .3s ease-in;

  transition: all .3s ease-in;

  opacity: 1;

  transform: scale(1.15);

  -ms-transform: scale(1.15); /* IE 9 */

  -webkit-transform: scale(1.15); /* Safari and Chrome */



}

You can transform Scale as per your requirement.