JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <img src="http://cs339.vk.me/u67029043/d_d2a84c01.jpg" >
</div>
    <div class="box">
        box
    </div>
    <div class="container1">
    <img src="http://cs339.vk.me/u67029043/d_d2a84c01.jpg" >
</div>
    <div class="box1">
        box1
    </div>
        <div class="container2">
    <img src="http://cs339.vk.me/u67029043/d_d2a84c01.jpg" >
</div>
    <div class="box2">
        box2
    </div>

CSS

div{float:left;}

JavaScript

$(document).ready(function() {
    $('.box').hide();
    $('.box1').hide();
    $('.box2').hide();
    $('.container').hover(function() {
        $('.box').show(); 
        $('.container2').hide();
        $('.container1').hide();
    }, function() {
        $('.container2').show();
        $('.container1').show();
        $('.box').hide();
    });  
});