"Card Hover"
Bootstrap 3.3.0 Snippet by WilsonF

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <div class="row"> <div class="col-md-4"> <div class="column"> <!-- Post--> <div class="post-module"> <!-- Thumbnail--> <div class="thumbnail"> <div class="date"> <a href="#0"> <div class="day"><i class="fa fa-bars" aria-hidden="true"></i></div> </a> </div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg" class="img-responsive" alt=""> </div> <!-- Post Content--> <div class="post-content"> <div class="category">Catagories</div> <h1 class="title">Lorem Ipsum</h1> <h2 class="sub_title">LEAD COORDINATOR</h2> <p class="description">New York, the largest city in the U.S., is an architectural marvel with plenty of historic monuments, magnificent buildings and countless dazzling skyscrapers.</p> <div class="post-meta"><span class="timestamp"><i class="fa fa-clock-">o</i> 6 mins ago</span><span class="comments"><i class="fa fa-comments"></i><a href="#"> 39 comments</a></span></div> </div> </div> </div> </div> <div class="col-md-4"> <div class="column"> <!-- Post--> <div class="post-module"> <!-- Thumbnail--> <div class="thumbnail"> <div class="date"> <a href="#0"> <div class="day"><i class="fa fa-bars" aria-hidden="true"></i></div> </a> </div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg" class="img-responsive" alt=""> </div> <!-- Post Content--> <div class="post-content"> <div class="category">Catagories</div> <h1 class="title">Lorem Ipsum</h1> <h2 class="sub_title">LEAD COORDINATOR</h2> <p class="description">New York, the largest city in the U.S., is an architectural marvel with plenty of historic monuments, magnificent buildings and countless dazzling skyscrapers.</p> <div class="post-meta"><span class="timestamp"><i class="fa fa-clock-">o</i> 6 mins ago</span><span class="comments"><i class="fa fa-comments"></i><a href="#"> 39 comments</a></span></div> </div> </div> </div> </div> <div class="col-md-4"> <div class="column"> <!-- Post--> <div class="post-module"> <!-- Thumbnail--> <div class="thumbnail"> <div class="date"> <a href="#0"> <div class="day"><i class="fa fa-bars" aria-hidden="true"></i></div> </a> </div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg" class="img-responsive" alt=""> </div> <!-- Post Content--> <div class="post-content"> <div class="category">Catagories</div> <h1 class="title">Lorem Ipsum</h1> <h2 class="sub_title">LEAD COORDINATOR</h2> <p class="description">New York, the largest city in the U.S., is an architectural marvel with plenty of historic monuments, magnificent buildings and countless dazzling skyscrapers.</p> <div class="post-meta"><span class="timestamp"><i class="fa fa-clock-">o</i> 6 mins ago</span><span class="comments"><i class="fa fa-comments"></i><a href="#"> 39 comments</a></span></div> </div> </div> </div> </div> </div>
.post-module { position: relative; z-index: 1; display: block; background: #FFFFFF; min-width: 270px; height: 350px; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .post-module:hover, .hover { -webkit-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3); } .post-module:hover .thumbnail img, .hover .thumbnail img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); opacity: .6; } .post-module .thumbnail { background: #000000; height: 350px; overflow: hidden;padding: 0; } .post-module .thumbnail .date { position: absolute; top: 20px; right: 20px; z-index: 1; background: #f2b202; width: 55px; height: 55px; padding: 12.5px 0; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; color: #FFFFFF; font-weight: 700; text-align: center; -webkti-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .post-module .thumbnail .date .day { font-size: 18px; line-height: 31px; color: #fff; } .post-module .thumbnail .date .month { font-size: 12px; text-transform: uppercase; } .post-module .thumbnail img { display: block; width: 120%; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .post-module .post-content { position: absolute; bottom: 0; background: #FFFFFF; width: 100%; padding: 0 30px; -webkti-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; -moz-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; -ms-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; -o-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; } .post-module .post-content .category { position: absolute; top: -34px; left: 0; background: #f2b202; padding: 10px 15px; color: #FFFFFF; font-size: 14px; font-weight: 600; text-transform: uppercase; } .post-module .post-content .title { margin: 0; padding: 0 0 10px; color: #222 !important; font-size: 24px !important; font-weight: 700; margin: 40px 0 0 !important; } .post-module .post-content .sub_title { margin: 0; padding: 0 0 20px; color: #f2b202; font-size: 20px; font-weight: 400; } .post-module .post-content .description { display: none; color: #666666; font-size: 14px; line-height: 1.8em; } .post-module .post-content .post-meta { margin: 0px 0px 10px; color: #999999; } .post-module .post-content .post-meta .timestamp { margin: 0 16px 0 0; } .post-module .post-content .post-meta a { color: #999999; text-decoration: none; } .hover .post-content .description { display: block !important; height: auto !important; opacity: 1 !important; } .container .column { width: 100%; /* padding: 0 25px; */ -webkti-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; } .container .column .demo-title { margin: 0 0 15px; color: #666666; font-size: 18px; font-weight: bold; text-transform: uppercase; } .container .info { width: 300px; margin: 50px auto; text-align: center; } .container .info h1 { margin: 0 0 15px; padding: 0; font-size: 24px; font-weight: bold; color: #333333; } .container .info span { color: #666666; font-size: 12px; } .container .info span a { color: #000000; text-decoration: none; } .container .info span .fa { color: #f2b202; }
$(window).load(function() { $('.post-module').hover(function() { $(this).find('.description').stop().animate({ height: "toggle", opacity: "toggle" }, 300); }); });

Related: See More


Questions / Comments: