| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <div id="box" class="container"> | |
| <img class="img-circle" src="http://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="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script> | |
| <link href="http://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="http://tympanus.net/Tutorials/CaptionHoverEffects/js/toucheffects.js"></script --> | |
| </body></html> |
| $( '#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 |
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 by Lopez Hugo on CodePen.
| 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; } |
