CODEWITHSUNDEEP
javascripthtmlcssimage
Cscience18
Cscience18

Reputation: 25

I would like to make my image pop out larger when I click on it

I am new to HTML,CSS and Javascript. I am trying to get my picture to pop out larger when I click on it but I do not know how to implement it. I have been trying to find a good Javascript tutorial but explain a technique for this. Please Help. (All I have right know is the code to put the image on the web page).

I would like it to look something like this.

http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image

but they do not show the javascript in the tutorial

Upvotes: 1

Views: 15131

Answers (3)

alexandergs
alexandergs

Reputation: 192

Try this. Change the src with your image name. Regards!

<html>
<head>
<style>
    .pop-out
    {
        transition: transform .5s;
    }

    .pop-out:hover
    {
        -ms-transform: scale(1.5, 1.5);
        -webkit-transform: scale(1.5, 1.5);
        transform: scale(1.5, 1.5);
    }
</style>
</head>
<body>
    <img src="test.jpg" class="pop-out">
    </body>
</html>

Upvotes: 3

Michael Jones
Michael Jones

Reputation: 2272

I have two great solutions :)

Option 1)

HTML

<img id="image" src="">

CSS

#image {
    width: 100%;
}
#image:hover {
    width: 150%;
}

Option 2)

HTML

<img id="image" src="">

CSS

#image {
    width: 100%;
}
#image:hover {
    transform: scale(1.5);
}

So simply, in both examples I am increasing the image size by 50%. Now the two ways to do this are make a bigger width, or use scale(x.x).

I hope I could help! :)

Upvotes: 0

Qwertiy
Qwertiy

Reputation: 21380

body {
  padding: 3em;
}

img {
  transition: transform .5s;
}

img:hover {
  transform: scale(2.5);
}
<img src="//www.gravatar.com/avatar/9708ca3dca5969e124d0730acf48d2e7?s=32&d=identicon&r=PG&f=1">

See http://caniuse.com/#feat=transforms2d and http://caniuse.com/#search=transition for more details about browser support and vendor prefixes.

Upvotes: 6

Related Questions