<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="row"> <div class="well" id="well_1"> <img src="http://placehold.it/300x200" alt="" class="img-responsive center-block"> </div> <div class="well" id="well_2"> <article class="panel"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, maiores, ipsa, vero fugiat neque ratione harum amet dolores soluta quisquam et minima dolor sunt ullam natus qui vel voluptatibus voluptates pariatur laborum inventore non molestias impedit explicabo nesciunt recusandae corrupti quae facilis cum sequi reprehenderit ea laboriosam doloribus asperiores perferendis. </div> </article> </div> </div> </div>

body{ position:relative !important; } .well{ height:25vmax; width:30vw; } #well_2{ position:absolute; top:0; left:-10; z-index:-1; opacity:0; transition:all 1s ease-in; } #well_1{ transition:all 1s ease-in; } #well_1:hover{ opacity:0; transform:translateX(-100px); } #well_1:hover+#well_2{ opacity:1; transform:translateX(10px); }