More fluid hover animation
<p>Hello I am trying to create a fluid animation using JQuery in which you hover over the picture and then both the picture and the text expand. However it does not look very fluid and I've also had to hard code the way the other divs react. </p>

<p>Is there any way I can go about this in which, when the divs are expanded the other ones go down automatically. Also is there anything I should be doing to get the text to become bigger in a smoother way. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    $("#mLoveless img").hover(function(){
               lovelessHover();
        }, function(){
      normalize();
    });
});

$(document).ready(function(){
    $("#vGod img").hover(function(){
       godHover();
       
        }, function(){
            
       normalize();
    });
});

$(document).ready(function(){
    $("#pScilla img").hover(function(){
       scillaHover();
       
        }, function(){
       normalize();
    });
});

$(document).ready(function(){
    $("#dBo img").hover(function(){
       boHover();
       
        }, function(){
       normalize();
    });
});

var increaseLove = function()
{  
      $("#mLoveless img").stop().animate({
       width: '400px',
       height:'275px'
    }, { duration: 500, queue: false });
       
     $("#mLoveless .imageText3").css("font-size", "15px");
     $("#mLoveless .imageText1").css("font-size", "18px");
     $("#mLoveless .imageText2").css("font-size", "18px");     
}

var increaseGod = function()
{           
    $("#vGod img").stop().animate({
       width: '400px',
       height:'275px'
    }, { duration: 500, queue: false });
    
     $("#vGod .imageText1").css("font-size", "18px");
     $("#vGod .imageText2").css("font-size", "18px");
     $("#vGod .imageText3").css("font-size", "15px");
}

var increaseScilla = function()
{           
    $("#pScilla img").stop().animate({
       width: '400px',
       height:'275px'
    }, { duration:500, queue: false });
    
     $("#pScilla .imageText1").css("font-size", "18px");
     $("#pScilla .imageText2").css("font-size", "18px");
     $("#pScilla .imageText3").css("font-size", "15px");
}

var increaseBo = function()
{           
    $("#dBo img").stop().animate({
       width: '400px',
       height:'275px'
    }, { duration: 500, queue: false });
    
     $("#dBo .imageText1").css("font-size", "18px");
     $("#dBo .imageText2").css("font-size", "18px");
     $("#dBo .imageText3").css("font-size", "15px");
}

var decreaseLove = function()
{
    $("#mLoveless img").stop().animate({
       width: '40px',
       height:'40px'
    }, { duration: 200, queue: false });

     $("#mLoveless .imageText1").css("font-size", "9px");
     $("#mLoveless .imageText2").css("font-size", "9px"); 
}

var decreaseGod = function()
{
    var marginFactor;
    if(currentHover == "loveless")
    {            
        marginFactor = '90px';
    }
    else if (currentHover == "scilla")
    {
        marginFactor = '-50px';
    }
     else if (currentHover == "bo")
    {
        marginFactor = '-50px'
    }      

    $("#vGod").stop().animate({
       marginTop: marginFactor
    }, { duration: 200, queue: false });       
}

var decreaseScilla = function()
{
    var marginFactor;
    if(currentHover == "loveless")
    {            
        marginFactor = '-50px';
    }
    
    else if (currentHover == "god")
    {
        marginFactor = '90px';
    }
    
    else if (currentHover == "bo")
    {
        marginFactor = '-50px'
    }
    
    $("#pScilla").stop().animate({
       marginTop: marginFactor
    }, { duration: 200, queue: false });        
}

var decreaseBo = function()
{
    var marginFactor;
    if(currentHover == "loveless")
    {            
        marginFactor = '-50px';
    }
    
    else if (currentHover == "god")
    {
        marginFactor = '-50px';
    }
    
    else if (currentHover == "scilla")
    {
        marginFactor = '90px';
    }
    
     $("#dBo").stop().animate({
       marginTop: marginFactor
    }, { duration: 200, queue: false });        
}
    
var lovelessHover = function()
{         
    currentHover = "loveless";
    decreaseGod();
      setTimeout(function(){
              increaseLove();
                   }, 250);      
}

var godHover = function()
{
    currentHover = "god";
  decreaseScilla();
   setTimeout(function(){
              increaseGod();
                   }, 250);        
}

var scillaHover = function()
{
    currentHover = "scilla";
   decreaseBo();
    setTimeout(function(){
              increaseScilla();
                   }, 250);       
}

var boHover = function()
{
    currentHover = "bo";
    increaseBo();        
}

var normalize = function()
{
  $(".imageText1").css("font-size", "15px");
  $(".imageText2").css("font-size", "15px");
  $(".imageText3").css("font-size", "12px");
  
     $(".imageBoxes img").stop().animate({
       width: '250px',
       height:'200px'
    }, { duration: 500, queue: false });
    
     $("#vGod").stop().animate({
       marginTop: '20px'
    }, { duration: 200, queue: false });
    
     $("#pScilla").stop().animate({
       marginTop: '20px'
    }, { duration: 200, queue: false });
    
     $("#dBo").stop().animate({
       marginTop: '20px'
    }, { duration: 200, queue: false });
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#entirePage
{
    position: absolute;
    width:1200px;
    height: 100%;
    left:80px;
}

#mainPage
{
    position: absolute;
    top: 20%;
  width:100%;
    
    height:80%;
    left:70px;
}

.topText
{
    display: flex;
    flex-direction:row;
}

.textBoxes
{
    display: flex;
    flex-direction:column;
}

.imageBoxes
{       
    display:flex;
    flex-direction:row;
    
    width:100%;
    height:200px;
    transition:all .5s;
    z-index: 1;
}

#mLoveless
{
    margin-top: 10px;
}

#vGod
{
    margin-top:20px;
}

#pScilla
{
    margin-top: 20px;
}

#dBo
{
    margin-top: 20px;
}

.imageText1
{
    font-family: 'FuturaMedium';       
}

.imageText2
{
    font-family: 'CourierNewBold';       
}

.imageText1,.imageText2
{
    color:black;
    margin-left: 30px;
    font-size:15px;
    font-weight: bold;
    letter-spacing: 5px;
    transition:all .5s;
}

.imageText1
{
   margin-top: -1px;      
}

.imageText2
{
    margin-top: 4px;
}

.bottomText
{          
    max-height: 100%;
    max-width: 800px; 
}

.imageText3
{
    margin-top: 3px;
    color:black;
    margin-left: 30px;
    font-family: 'FuturaMedium';
    font-size:13px;
  transition: background-color .2s ease-out;       
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;

       &lt;div id = "entirePage"&gt;
            &lt;div id = mainPage&gt;
             &lt;div id = founderBox&gt;
                &lt;h1 id="founder"&gt;OUR FOUNDERS&lt;/h1&gt; 
                &lt;/div&gt;
                &lt;div class="imageBoxes" id="mLoveless"&gt;
                 
                    &lt;img src = "https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13532032_1604588203204336_1875659176_n.jpg?ig_cache_key=MTI4NDI2NjgxNDQ5MDEzNzU1Mw%3D%3D.2" width="250px" height="200px"&gt;
                    &lt;div class = "textBoxes"&gt;
                  &lt;p class = "imageText1"&gt;CEO &amp; PRESIDENT :&lt;/p&gt; &lt;p class = "imageText2"&gt; John Doe&lt;/p&gt;
                  &lt;div class = 'bottomText'&gt;
                 &lt;p class = "imageText3"&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet nunc ac lacus hendrerit aliquet. Duis nec vestibulum odio. Etiam gravida pharetra tortor, nec varius lorem mattis nec. Curabitur eget erat ultricies, egestas odio non, elementum lectus. Suspendisse quis sapien et odio sagittis bibendum. Aliquam nec orci semper, malesuada mi nec, mattis nisl. Aenean quis ex ornare, sollicitudin velit nec, tempor sem. Ut id erat dignissim, cursus leo vitae, molestie felis. Curabitur condimentum quis nunc vel dapibus. Donec sit amet nibh vitae orci ultricies pharetra sed quis sapien. Morbi est turpis, sodales id dictum a, commodo eu neque. Morbi luctus justo non leo vehicula, et ornare nisl convallis. Vivamus cursus sapien ac vehicula sollicitudin. Maecenas dignissim neque eu imperdiet elementum. Vivamus quis auctor lectus, ullamcorper elementum lectus. In hac habitasse platea dictumst. Nulla orci tellus, varius faucibus elementum nec, aliquam a neque. Praesent tempor luctus fringilla. Nulla eget felis ut urna pretium auctor vel a quam.
                 &lt;/p&gt;
                  &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt; 
    
                &lt;div class="imageBoxes" id="vGod"&gt;
                     &lt;img src = "https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13532032_1604588203204336_1875659176_n.jpg?ig_cache_key=MTI4NDI2NjgxNDQ5MDEzNzU1Mw%3D%3D.2" width="250px" height="200px"&gt;
                     &lt;div class = "textBoxes"&gt;
                     
                    &lt;p class = "imageText1"&gt;VP PRODUCT DEVELOPMENT :&lt;/p&gt; &lt;p class = "imageText2"&gt; John Doe&lt;/p&gt;
                     &lt;div class = 'bottomText'&gt;
                      &lt;p class = imageText3&gt;
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet nunc ac lacus hendrerit aliquet. Duis nec vestibulum odio. Etiam gravida pharetra tortor, nec varius lorem mattis nec. Curabitur eget erat ultricies, egestas odio non, elementum lectus. Suspendisse quis sapien et odio sagittis bibendum. Aliquam nec orci semper, malesuada mi nec, mattis nisl. Aenean quis ex ornare, sollicitudin velit nec, tempor sem. Ut id erat dignissim, cursus leo vitae, molestie felis. Curabitur condimentum quis nunc vel dapibus. Donec sit amet nibh vitae orci ultricies pharetra sed quis sapien. Morbi est turpis, sodales id dictum a, commodo eu neque. Morbi luctus justo non leo vehicula, et ornare nisl convallis.
Vivamus cursus sapien ac vehicula sollicitudin. Maecenas dignissim neque eu imperdiet elementum. Vivamus quis auctor lectus, ullamcorper elementum lectus. In hac habitasse platea dictumst. Nulla orci tellus, varius faucibus elementum nec, aliquam a neque. Praesent tempor luctus fringilla. Nulla eget felis ut urna pretium auctor vel a quam.
                       &lt;/p&gt;
                       &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                   
                 &lt;div class="imageBoxes" id="pScilla"&gt;
                     &lt;img src = "https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13532032_1604588203204336_1875659176_n.jpg?ig_cache_key=MTI4NDI2NjgxNDQ5MDEzNzU1Mw%3D%3D.2" width="250px" height="200px"&gt;
                     &lt;div class = "textBoxes"&gt;
                      &lt;p class = "imageText1"&gt;VP SUPPLY CHAIN INNOVATION :&lt;/p&gt; &lt;p class = "imageText2"&gt; John Doe&lt;/p&gt;
                      &lt;div class = 'bottomText'&gt;
                      &lt;p class = imageText3&gt;
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet nunc ac lacus hendrerit aliquet. Duis nec vestibulum odio. Etiam gravida pharetra tortor, nec varius lorem mattis nec. Curabitur eget erat ultricies, egestas odio non, elementum lectus. Suspendisse quis sapien et odio sagittis bibendum. Aliquam nec orci semper, malesuada mi nec, mattis nisl. Aenean quis ex ornare, sollicitudin velit nec, tempor sem. Ut id erat dignissim, cursus leo vitae, molestie felis. Curabitur condimentum quis nunc vel dapibus. Donec sit amet nibh vitae orci ultricies pharetra sed quis sapien. Morbi est turpis, sodales id dictum a, commodo eu neque. Morbi luctus justo non leo vehicula, et ornare nisl convallis.
Vivamus cursus sapien ac vehicula sollicitudin. Maecenas dignissim neque eu imperdiet elementum. Vivamus quis auctor lectus, ullamcorper elementum lectus. In hac habitasse platea dictumst. Nulla orci tellus, varius faucibus elementum nec, aliquam a neque. Praesent tempor luctus fringilla. Nulla eget felis ut urna pretium auctor vel a quam.
                       &lt;/p&gt;
                       &lt;/div&gt;
                      &lt;/div&gt;
                &lt;/div&gt;
                 &lt;div class="imageBoxes" id="dBo"&gt;
                      &lt;img src = "https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13532032_1604588203204336_1875659176_n.jpg?ig_cache_key=MTI4NDI2NjgxNDQ5MDEzNzU1Mw%3D%3D.2" width="250px" height="200px"&gt;
                      &lt;div class = "textBoxes"&gt;
                      &lt;p class = "imageText1"&gt;VP CLOUD SOLUTIONS &amp; STRATEGIES :&lt;/p&gt; &lt;p class = "imageText2"&gt; John Doe&lt;/p&gt;
                                            &lt;div class = 'bottomText'&gt;
                      &lt;p class = imageText3&gt;
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet nunc ac lacus hendrerit aliquet. Duis nec vestibulum odio. Etiam gravida pharetra tortor, nec varius lorem mattis nec. Curabitur eget erat ultricies, egestas odio non, elementum lectus. Suspendisse quis sapien et odio sagittis bibendum. Aliquam nec orci semper, malesuada mi nec, mattis nisl. Aenean quis ex ornare, sollicitudin velit nec, tempor sem. Ut id erat dignissim, cursus leo vitae, molestie felis. Curabitur condimentum quis nunc vel dapibus. Donec sit amet nibh vitae orci ultricies pharetra sed quis sapien. Morbi est turpis, sodales id dictum a, commodo eu neque. Morbi luctus justo non leo vehicula, et ornare nisl convallis.
Vivamus cursus sapien ac vehicula sollicitudin. Maecenas dignissim neque eu imperdiet elementum. Vivamus quis auctor lectus, ullamcorper elementum lectus. In hac habitasse platea dictumst. Nulla orci tellus, varius faucibus elementum nec, aliquam a neque. Praesent tempor luctus fringilla. Nulla eget felis ut urna pretium auctor vel a quam.
                       &lt;/p&gt;
                       &lt;/div&gt;
                      &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;               
        &lt;/div&gt;</code></pre>
</div>
</div>
</p>