JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<div id="main_wrapper">
    <div class="floatLeft container">
        <img src="http://www.infostud.com/ecms/files/_thumb/305x287/zamedije_vesti_37320/najbolje-iz-srbije-markica1.jpg" class="double" id="image"></img>
    </div>
    <div class="floatLeft container">
        <img src="http://www.infostud.com/ecms/files/_thumb/305x287/zamedije_vesti_37320/najbolje-iz-srbije-markica1.jpg" id="image"></img>
    </div>
    <div class="floatLeft container">
        <img src="http://www.infostud.com/ecms/files/_thumb/305x287/zamedije_vesti_37320/najbolje-iz-srbije-markica1.jpg" id="image"></img>
    </div>
    <div class="floatLeft container">
        <img src="http://www.infostud.com/ecms/files/_thumb/305x287/zamedije_vesti_37320/najbolje-iz-srbije-markica1.jpg" id="image"></img>
    </div>
    <div class="floatLeft container">
        <img src="http://www.infostud.com/ecms/files/_thumb/305x287/zamedije_vesti_37320/najbolje-iz-srbije-markica1.jpg" id="image"></img>
    </div>
    <div class="floatLeft container">
        <img src="http://www.infostud.com/ecms/files/_thumb/305x287/zamedije_vesti_37320/najbolje-iz-srbije-markica1.jpg" id="image"></img>
    </div>
    <div class="floatLeft container">
        <img src="http://www.infostud.com/ecms/files/_thumb/305x287/zamedije_vesti_37320/najbolje-iz-srbije-markica1.jpg" id="image"></img>
    </div>
    <div class="floatLeft container">
        <img src="http://www.infostud.com/ecms/files/_thumb/305x287/zamedije_vesti_37320/najbolje-iz-srbije-markica1.jpg" id="image"></img>
    </div>
    <div class="floatLeft container">
        <img src="http://www.infostud.com/ecms/files/_thumb/305x287/zamedije_vesti_37320/najbolje-iz-srbije-markica1.jpg" id="image"></img>
    </div>
</div>

CSS

body {
    background-color: whitesmoke;
    font-family: Helvetica, Arial, sans-serif;
    color: #333333;
    font-size: 13px;
    line-height: 1.5;
}
#main_wrapper {
    width: 42%;
    margin:10%;
    border: 1px solid black;
    display:inline-block;
}
#main_wrapper:hover {
    width: 44%;
}
#image:hover {
    -moz-transform: scale(2, 2);
    margin:53px;
}
.container:hover {
    margin-left: 1 px;
}
.floatLeft {
    float:left;
}
.floatRight {
    float:right;
}
.double {
    width:204px;
    height:209px;
}

JavaScript

$("#main_wrapper").hover(function () {
    $(".double").removeClass("double");
});