<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="ourprograms"> <div class="container"> <h2 style="text-align:center; margin-top: 60px;font-family: Verdana; color: #ffff00; font-weight: 900;">Our Programs</h2> <!--first row--> <div class="row firstrow"> <!--<div class="col-md-3 col-sm-3 col-lg-3 col-xs-12"> <h3 class="heading">Short Term<span><i class="fa fa-arrow-right" aria-hidden="true"></i></span></h3> </div>--> <div class="col-md-4 col-sm-4 col-lg-4 col-xs-12 stpro"> <div class="textanim-container"> <img src="img/sixmon.png" alt="logoicon" class="img-responsive ourproimg"> <h1 class="textanim-title">IIM Ahmedabad</h1> <span class="textanim-hidden"> Executive Program in Advanced Business Analytics(EPABA):6-months<br> <button class="btn info" style="margin-top:15px;">Read More</button> </span> </div> </div> <div class="col-md-4 col-sm-4 col-lg-4 col-xs-12 stpro"> <!--<h3>Short Term2</h3> <p>IIM Ahmedabad: Executive Program in Business Finance (EPBF) - 6-months</p>--> <div class="textanim-container"> <img src="img/sixmon.png" alt="logoicon" class="img-responsive ourproimg"> <h1 class="textanim-title">IIM Ahmedabad</h1> <span class="textanim-hidden"> Executive Program in Business Finance (EPBF) - 6-months<br> <button class="btn info" style="margin-top:15px;">Read More</button> </span> </div> </div> <div class="col-md-4 col-sm-4 col-lg-4 col-xs-12 stpro"> <div class="textanim-container"> <img src="img/twoyear.png" alt="logoicon" class="img-responsive ourproimg"> <h1 class="textanim-title">IIM Ahmedabad</h1> <span class="textanim-hidden"> ePost Graduate Programme in Management (ePGP)- Two-years Course<br> <button class="btn info" style="margin-top:15px;">Read More</button> </span> </div> </div> </div> <!--second row--> <div class="row secondrow"> <!--<div class="col-md-3 col-sm-3 col-lg-3 col-xs-12"> <h3 class="heading">Long Term<span><i class="fa fa-arrow-right" aria-hidden="true"></i></span></h3> </div>--> <!--<div class="col-md-2 col-sm-2 col-lg-2 col-xs-12 stpro"> <h3>ePost Graduate Programme in Management (ePGP)</h3> <p>IIM Ahmedabad: - Two-years Course</p> </div>--> <div class="col-md-4 col-sm-4 col-lg-4 col-xs-12 stpro"> <!--<h3>Long Term2</h3> <p>IIM Ahmedabad: Senior Management Program(SMP) - One-year Course</p>--> <div class="textanim-container"> <img src="img/oneyear.png" alt="logoicon" class="img-responsive ourproimg"> <h1 class="textanim-title">IIM Ahmedabad</h1> <span class="textanim-hidden"> Senior Management Program(SMP) - One-year Course <br> <button class="btn info" style="margin-top:15px;">Read More</button> </span> </div> </div> <div class="col-md-4 col-sm-4 col-lg-4 col-xs-12 stpro"> <!--<h3>Long Term3</h3> <p>IIM Calcutta: Executive Program in Business Management (EPBM) - One-year Course</p>--> <div class="textanim-container"> <img src="img/oneyear.png" alt="logoicon" class="img-responsive ourproimg"> <h1 class="textanim-title">IIM Calcutta</h1> <span class="textanim-hidden"> Executive Program in Business Management (EPBM) - One-year Course <br> <button class="btn info" style="margin-top:15px;">Read More</button> </span> </div> </div> <div class="col-md-4 col-sm-4 col-lg-4 col-xs-12 stpro"> <!--<h3>Long Term3</h3> <p>IIM Calcutta: Executive Program in Business Management (EPBM) - One-year Course</p>--> <div class="textanim-container"> <img src="img/oneyear.png" alt="logoicon" class="img-responsive ourproimg"> <h1 class="textanim-title">IIM Calcutta</h1> <span class="textanim-hidden"> IIM Calcutta: Executive Program in Sales and Marketing (EPSM) - One-year Course <br> <button class="btn info" style="margin-top:15px;">Read More</button> </span> </div> </div> </div> <div class="hoverbttn"> <a href="#" class="btn-style-one theme-btn ourpro">Apply Now</a></div> </div> </div>

/************************************our programs new*******************************/ img.img-responsive.ourproimg { max-width: 85px; height: 85px; } .textanim-container { position: relative; max-width: 234px; min-height: 217px; margin: auto; border: 1px solid #ccc; overflow: hidden; } .ourproimg{ margin: 0; position: absolute; width: 100%; left: 64px; right: 0; top: 27%; transform: translateY(-50%); text-align: center; transition: 0.5s;} .textanim-container:hover .ourproimg{ top: -103px; transform: translateY(0); } .textanim-title { margin: 0; position: absolute; width: 100%; left: 0; right: 0; top: 65%; transform: translateY(-50%); text-align: center; transition: 0.5s; color: #ffffff; } .textanim-container:hover .textanim-title { top: 10px; transform: translateY(0); } .textanim-hidden { position: absolute; top: 400px; transition: 0.8s; text-align: center; color: #ffffff; font-family: Verdana; } .textanim-container:hover .textanim-hidden { top: 50%; transform: translateY(-50%); } h1.textanim-title { font-size: 21px; font-weight: 600; font-family: Verdana; } .info { border: none; color: white; padding: 14px 28px; font-size: 16px; cursor: pointer; } .info {background-color: #2196F3;} /* Blue */ .info:hover {background: #0b7dda;}