JSFiddle - React, Tailwind, and code Playground

by lborgman

HTML

<div class="wrap">
    <div class="image"></div>
</div>
<div class="wrap">
    <img class="image2" src="http://blog.dothegreenthing.com/wp-content/uploads/2012/10/take-a-smile.jpg" />
</div>

CSS

.wrap{
    width: 200px;
    height: 130px;
    overflow: hidden;
    border-radius: 15px;
    border: 2px black solid;
}
.image{
    background: url(http://blog.dothegreenthing.com/wp-content/uploads/2012/10/take-a-smile.jpg) no-repeat;
    width: 200px;
    height: 130px;
    transition: all 2s ease-out;
}
.image:hover{
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    cursor: pointer;
}
.image2{
    width: 400px;
    height: 260px;
    transition: all 2s ease-out;
}
.image2:hover{
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    cursor: pointer;
}