material card with image effect

Bootstrap snippet. material card with image effect, this snippet 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 authors card

bs4 authors card

View

Bootstrap snippet bs4 simple social network post

bs4 simple social network post

View

Bootstrap snippet card chat list

card chat list

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.7

Created: Jul 21st 2017, 18:23

Views: 153