JSFiddle - React, Tailwind, and code Playground

HTML

<div id="anim_container">
            <div id="one">
                <div id="one_txt" class="label"> This would be a nice spot for some texty text. </div>
          </div>
            <div id="two">
                <div id="two_txt" class="label"> This would be a nice spot for some texty text. </div>
            </div>    
            <div id="three">
                <div id="three_txt" class="label"> This would be a nice spot for some texty text. </div>
            </div>
            <div id="four">
              <div id="four_txt" class="label"> This would be a nice spot for some texty text. </div>
            </div>

CSS

#anim_container {
                width: 600px;
                height: 600px;
                display: block;
                margin: 0px auto 0px auto;
                position: relative;
            }
            
            #one {
    width: 600px;
    height: 150px;
    position: relative;
    overflow: hidden;
    background-image: url(images/01_quienes.jpg);
                }
            
            #two {
    width: 600px;
    height: 150px;
    position: relative;
    overflow: hidden;
    background-image: url(images/02_amedica.jpg);
            }
            
            #three {
    width: 600px;
    height: 150px;
    position: relative;
    overflow: hidden;
    background-image: url(images/03_programas.jpg);
            }
            
            #four {
    width: 600px;
    height: 150px;
    position: relative;
    overflow: hidden;
    background-image: url(images/04_shospitalarios.jpg);
            }
            .copy {
    text-shadow: 3px 3px 3px #000;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px;
    font-size: small;
            }
            .label {
    width: 350px;
    right: 0px;
    position: absolute;
    top: 150px;
    font-size: medium;
    text-shadow: 2px 2px 5px #292929;
    font-weight: bold;
    color: #FFF;
    font-family: Tahoma, Geneva, sans-serif;
    text-transform: uppercase;
    margin-right: 15px;
}

#one,#two,#three,#four { border:1px #000 solid; }​

JavaScript

$(function(){
                            $('#one').stop().hover(function(){
                                $(this).stop().animate({"height":"330px"},600)
                                $('#two').stop().animate ({"height" : "90px"}, 600),
                                $('#three').stop().animate ({"height" : "90px"}, 600),
                                $('#four').stop().animate ({"height" : "90px"}, 600)
                            });    
                        });
                        $(function(){
                            $('#one > *').stop().mouseout(function(){
                                $(this).stop().animate({"height":"150px"},600)
                                $('#two').stop().animate ({"height" : "150px"}, 600),
                                $('#three').stop().animate ({"height" : "150px"}, 600),
                                $('#four').stop().animate ({"height" : "150px"}, 600)
                            });
                        });
                        $(function(){
                            $('#two').stop().hover(function(){
                                $(this).stop().animate({"height":"330px"},600)
                                $('#one').stop().animate ({"height" : "90px"}, 600),
                                $('#three').stop().animate ({"height" : "90px"}, 600),
                                $('#four').stop().animate ({"height" : "90px"}, 600)
                            });    
                        });
                        $(function(){
                            $('#two > *').stop().mouseout(function(){
                                $(this).stop().animate({"height":"150px"},600)
                                $('#one').stop().animate ({"height" : "150px"}, 600),
                                $('#three').stop().animate ({"height" : "150px"}, 600),
                                $('#four').stop().animate ({"height" : "150px"}, 600)
                            });
                        });
     ...