material card with image effect

This bootstrap snippet called "material card with image effect" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: card,material

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<div class="col-md-4">
    		 <div class="card material well-material-cyan-700 text-white">
                <div class="card-image">
                    <img class="img-responsive" src="http://demo.bootstraptor.com/materria/images/mb-bg-fb-01.jpg">
                    
                </div>
                <!-- card image -->
                
                <div class="card-content">
                       <span class="card-title ">Material Cards</span>  
                    <button type="button" class="show btn btn-fab btn-material-lime-A200 btn-card-fab" aria-label="Left Align">
                        <i class="mdi-navigation-more-vert"></i>
                    <div class="ripple-wrapper"></div></button>
                </div><!-- card content -->
                <div class="card-action">
                    <a href="#" target="_blank">Share</a>
                    <a href="#" target="_blank">Learn more</a>                    
                    
                </div><!-- card actions -->
                <div class="card-reveal" style="display: none;">
                    <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>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

@font-face{
font-family:Roboto;
src: url(http://fonts.gstatic.com/s/roboto/v15/W5F8_SL0XFawnjxHGsZjJA.ttf);}

    html body  {
	font-family:Roboto;
}
	
	.btn-rbf{
		position:fixed;
		bottom:10%;
		right:30px;
		z-index:2000;
	}
	.btn-rbf.btn-top {

	  left: 47%;
	  position: absolute;
	  bottom: -20px;
	}
	.wrapper{
		display:block;
		max-width:100%;
		width:100%;
		overflow:hidden;
	}
	
	i.icon-featured {
  font-size: 34pt;
}

.card.material .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.material .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.material .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.material .card-content {
    padding: 10px;   
    top:100%; 
    position: relative;
}

.card.material .card-content .card-title, .card-reveal .card-title{
    font-size: 24px;
    font-weight: 200;    
}

.card.material .card-action{
    padding: 20px;
    border-top: 1px solid rgba(160, 160, 160, 0.2);
}
.card.material .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.material .card-action a:hover{    
    color:#ffd8a6;
    text-decoration:none;
}

.card.material .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.material .card-reveal p{
    color: rgba(0, 0, 0, 0.71);
    margin:20px ;
}

.btn-custom{
    background-color: transparent;
    font-size:18px;
}

.card .btn-card-fab{
	position: absolute;
	bottom:30px;
	right:10px;
}

.card.text-white,
.card.text-white a{
	color:#fff !important;
}


.well-bottom{
	position:absolute;
	bottom:0;
	right:0;
	left:0;
	margin-bottom:0 !important;
	padding:150px 0 !important;
	margin-top:450px;
}


section#top-section {
  margin-bottom: 0;
  z-index: 1;
}


                                    

Similar snippets

Bootstrap snippet bs4 new friends panel

bs4 new friends panel

View

Bootstrap snippet bs4 profile header card

bs4 profile header card

View

Bootstrap snippet Profile card with header

Profile card with header

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.7

Created: Jul 21st 2017, 18:23

Views: 134