ShowUp Card by hugolpz

script.js

$( '#box').click(function() {
    if($( '#box').data("click")!=="front"){
    $( ".item" ).animate({ "font-size": "3em", "height":"60%"}, { duration: "0" }); 
    $( ".info" ).animate({ height: "toggle" }, { duration: ".6" });
    $( "button" ).animate({ opacity: "1" }, { duration: "2" });
    $("#box").data("click", "front");
  } else {
    $( ".item" ).animate({ "font-size": "5em", "height":"100%"}, { duration: "0" });
    $( ".info" ).animate({ height: "toggle" }, { duration: ".6" });
    $( "button" ).animate({ opacity: "0" }, { duration: ".4" });
    $("#box").data("click", "back");
  }
}); // http://tympanus.net/Tutorials/CaptionHoverEffects/index3.html

index.html

<!DOCTYPE html>
<html>
<body>
  <div id="box" class="container">
  <img class="img-circle" src="//tympanus.net/Tutorials/CaptionHoverEffects/images/2.png" alt="img02">
  <div class="item row-fluid text-center">
    Keilana</div>
  <div class="info row-fluid">
   <code>Info:</code> <span>Creshendo performance with heart driving beat, <name>Keilana</name> succeed into teasing the crow from a introvert melody up to a roaring earthquake like none did in a decade.</span><br />
   <button type="button" class="btn btn-danger pull-right" style="opacity:0;">Download</button>
  </div>
</div>









<script src="//code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>
<link href="//getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<script src="script.js" type="text/javascript"></script>

  <!-- script src="//tympanus.net/Tutorials/CaptionHoverEffects/js/toucheffects.js"></script -->
</body></html>

ShowUp-Card.markdown

ShowUp Card
-----------
Made with minimal JQuery, CSS, and Bootstrap. 
Answer to JQuery limitation of slideUp() which only hide by default. Extended with some sugar for the show case. 
http://stackoverflow.com/questions/7121147/slideup-only-hides-cant-show-using-slideup

A [Pen](http://codepen.io/hugolpz/pen/MYYZRm) by [Lopez Hugo](http://codepen.io/hugolpz) on [CodePen](http://codepen.io/).

[License](http://codepen.io/hugolpz/pen/MYYZRm/license).

style.css

body{ background-color: #acd2be;}
#box { position: relative; height:500px; width: 400px; background-color:#ffebb5;}

.item { font-weight: 900; font-size: 5em; float:center; }
img { width: 100%; }
.info { display: none; background:#2c3f52; width:100%; height:30%; position:absolute;bottom:0px; left:0px; padding: 10px; } 
.info > span { color: white; font-weight: 900; }
.info > code { color: #d44950; font-weight: 900; }
.info name { color: #d44950; font-weight: 900; }
.info > button { position:absolute; bottom:10px; right: 10px; }