JSFiddle - React, Tailwind, and code Playground

by webnotes42

HTML

<div id="t1">Image A</div>
When your mouse cursor hover Image A, it will be bigger.
<br />
<div class="container">
    <div  id="t2"> Image B
    </div>
    <input type="button" value="+/-">
</div>
click "+/-" button, click it zoom in. when zoom in, click it again -> zoom out

<hr/>
<p>@author David Cheng</p>
<p>@copyright (c) 2012, David Cheng</p>     
<p>@link http://webnotes42.blogspot.hk/ My blog</p>     
<p>@date  2012.08.25 AD.</p>

CSS

#t1,#t2{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    overflow:  scroll;
}

#t1:hover,.zoom_in
{
    margin:100px;
    transform:scale(2,4);
    -ms-transform:scale(2,4); /* IE 9 */
    -moz-transform:scale(2,4); /* Firefox */
    -webkit-transform:scale(2,4); /* Safari and Chrome */
    -o-transform:scale(2,4); /* Opera */
}

JavaScript

$(function() {
    $(":button").click(function() {
        $("#t2").toggleClass("zoom_in");
    }); //end click
}); //end ready