"Material Card Reveal with Image Effect"
Bootstrap 3.3.0 Snippet by bryanrojasq

Post to Facebook Tweet this

<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 ----------> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="card"> <div class="card-image"> <img class="img-responsive" src="http://lorempixel.com/555/300/sports"> </div><!-- card image --> <div class="card-content"> <span class="card-title">Material Cards</span> <button type="button" id="show" class="btn btn-custom pull-right" aria-label="Left Align"> <i class="fa fa-ellipsis-v"></i> </button> </div><!-- card content --> <div class="card-action"> <a href="#" target="new_blank">Link</a> <a href="#" target="new_blank">Link</a> <a href="#" target="new_blank">Link</a> <a href="#" target="new_blank">Link</a> <a href="#" target="new_blank">Link</a> </div><!-- card actions --> <div class="card-reveal"> <span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div><!-- card reveal --> </div> </div> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300); @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); .card .card-image{ overflow: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .card .card-image img{ -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .card .card-image:hover img{ -webkit-transform: scale(1.2) rotate(-7deg); -moz-transform: scale(1.2) rotate(-7deg); -ms-transform: scale(1.2) rotate(-7deg); -o-transform: scale(1.2) rotate(-7deg); transform: scale(1.2) rotate(-7deg); } .card{ font-family: 'Roboto', sans-serif; margin-top: 10px; position: relative; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .card .card-content { padding: 10px; } .card .card-content .card-title, .card-reveal .card-title{ font-size: 24px; font-weight: 200; } .card .card-action{ padding: 20px; border-top: 1px solid rgba(160, 160, 160, 0.2); } .card .card-action a{ font-size: 15px; color: #ffab40; text-transform:uppercase; margin-right: 20px; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -o-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .card .card-action a:hover{ color:#ffd8a6; text-decoration:none; } .card .card-reveal{ padding: 20px; position: absolute; background-color: #FFF; width: 100%; overflow-y: auto; /*top: 0;*/ left:0; bottom:0; height: 100%; z-index: 1; display: none; } .card .card-reveal p{ color: rgba(0, 0, 0, 0.71); margin:20px ; } .btn-custom{ background-color: transparent; font-size:18px; }
$(function(){ $('#show').on('click',function(){ $('.card-reveal').slideToggle('slow'); }); $('.card-reveal .close').on('click',function(){ $('.card-reveal').slideToggle('slow'); }); });

Related: See More

BLK• Design System
Hover Effect Style
Sonar Wave Effect in Circle With CSS
Different types of hover and transition effect.

Questions / Comments:

How do you place three cards side by side? I have made multiple attempts, but it just collapses vertically.

Larae () - 5 years ago - Reply 0

Normally its work and i have use angular JS data's are passing through the JSON data-rel values are not passing what happen

Mohamed Thaha () - 8 years ago - Reply 0

In multiple cards how could you put the data-rel values on JSON

Mohamed Thaha () - 8 years ago - Reply 0

In mine with bootstrap the card appears as transparent, i think i tried almost everything and the card still is trasnparent .. pleas help me!!!

Ana () - 8 years ago - Reply 0

this code works with bootstrap v3 or is this for the materialize framework?

William () - 9 years ago - Reply 0

This works with plain Bootstrap v3 :)

maxsurguy () - 9 years ago - Reply 0

when i copy past the code more information "card reveal" is not working...

Sadeepa Diluk () - 9 years ago - Reply 0

how do I put multiple cards on the same page without showing the card-reveal for all of them when user clicks on the elipses

txtBux () - 9 years ago - Reply 0

Awesome explanation, thanks!

Isabelle () - 9 years ago - Reply 0

One way,
Remove id='show' from each button (since you are creating multiple cards it will exist in each card - ids must be unique in html),
Add show-btn css class to same button.
Add tag data-rel='1' to button, to div with "card-reveal" class and button with class "close" in each instance of card.
Vary the data-rel number for each card. So, all data-rel's for a given card have the same number.

Examples
<button type="button" class="btn btn-custom pull-right show-btn" data-rel="1" aria-label="Left Align">
<div class="card-reveal" data-rel="1">
<button type="button" class="close" data-rel="1" data-dismiss="modal" aria-label="Close">

Then in javascript, change the #show id reference to be the class so it can handle all instances of the card and change each selector inside the function to use the source event dom element's data-rel to toggle the correct card.

$('.show-btn').on('click', function () {
$('div.card-reveal[data-rel=' + $(this).data('rel') + ']').slideToggle('slow');
});

$('.card-reveal .close').on('click', function() {
$('div.card-reveal[data-rel=' + $(this).data('rel') + ']').slideToggle('slow');
});

Sean Kelly () - 9 years ago - Reply 0

special thank!

Anh Quoc Tran (Alex Jr.) () - 8 years ago - Reply 0

Thank you so much. Brilliant!

txtBux () - 9 years ago - Reply 0