A Pen by Victor

Thumbnail
This awesome code was written by MotionCity, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MotionCity ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

       <div id = "entirePage">
            <div id = mainPage>
             <div id = founderBox>
                <h1 id="founder">OUR FOUNDERS</h1> 
                </div>
                <div class="imageBoxes" id="mLoveless">
                 
                    <img src = "http://timesofindia.indiatimes.com/thumb/msid-49477674,width-400,resizemode-4/49477674.jpg" width="250px" height="200px">
                    <div class = "textBoxes">
                  <p class = "imageText1">CEO & PRESIDENT :</p> <p class = "imageText2"> John Doe</p>
                  <div class = 'bottomText'>
                 <p class = "imageText3">
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.
                 </p>
                  </div>
                    </div>
                </div>
      

     
                 <div class="imageBoxes" id="vGod">
                     <img src = "http://timesofindia.indiatimes.com/thumb/msid-49477674,width-400,resizemode-4/49477674.jpg" width="250px" height="200px">
                     <div class = "textBoxes">
                     
                    <p class = "imageText1">VP PRODUCT DEVELOPMENT :</p> <p class = "imageText2"> John Doe</p>
                     <div class = 'bottomText'>
                      <p class = imageText3>
                       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.
                       </p>
                       </div>
                      </div>
                      </div>
                   
                 <div class="imageBoxes" id="pScilla">
                     <img src = "http://timesofindia.indiatimes.com/thumb/msid-49477674,width-400,resizemode-4/49477674.jpg" width="250px" height="200px">
                     <div class = "textBoxes">
                      <p class = "imageText1">VP SUPPLY CHAIN INNOVATION :</p> <p class = "imageText2"> John Doe</p>
                      <div class = 'bottomText'>
                      <p class = imageText3>
                       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.
                       </p>
                       </div>
                      </div>
                </div>



                 <div class="imageBoxes" id="dBo">
                      <img src = "http://timesofindia.indiatimes.com/thumb/msid-49477674,width-400,resizemode-4/49477674.jpg" width="250px" height="200px">
                      <div class = "textBoxes">
                      <p class = "imageText1">VP CLOUD SOLUTIONS & STRATEGIES :</p> <p class = "imageText2"> John Doe</p>
                                            <div class = 'bottomText'>
                      <p class = imageText3>
                       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.
                       </p>
                       </div>
                      </div>
                </div>
            </div>
      
            
        </div>

/*Downloaded from https://www.codeseek.co/MotionCity/a-pen-by-victor-woVNdy */
    #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%;
    
    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;
   
}


/*Downloaded from https://www.codeseek.co/MotionCity/a-pen-by-victor-woVNdy */
    var imageBoxes = ["mLoveless", "vGod"];

$(document).ready(function(){
    $(".imageBoxes").hover(function(){
      var id = this.id;
      var isAnimating = $("#"+id+" img").is(':animated');
      if(!isAnimating)
         {
      $("#" +id).stop().animate({
       marginBottom: '90px'
    }, { duration: 200, queue: false });
     
      setTimeout(function(){
              increaseBox(id);
                  }, 100);
        }
      }, function(){
       normalize();
    });
});


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

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 });
  
   setTimeout(function(){
            $(".imageBoxes").css("marginBottom","0px");
    
                   }, 250);
}

Comments