<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-12">
<div class="card rounded">
<span class="card-notify-badge">Low KMS</span>
<span class="card-notify-year">2018</span>
<div class="card-image">
<img class="img-responsive" src="http://lorempixel.com/1200/600/sports/">
</div><!-- card image -->
<div class="card-content">
<span class="card-title">Material Cards</span>
</div><!-- card content -->
</div>
</div>
<div class="col-12">
<div class="card rounded">
<span class="card-notify-badge">Low KMS</span>
<span class="card-notify-year">2018</span>
<div class="card-image">
<img class="img-responsive" src="http://lorempixel.com/1200/600/sports/">
</div><!-- card image -->
<div class="card-content">
<span class="card-title">Material Cards</span>
</div><!-- card content -->
</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;
width:100%;
}
.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: 20px;
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-notify-year {
position: absolute;
right: -10px;
top: -20px;
background: #ff4444;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 14px;
width: 50px;
height: 50px;
padding: 15px 0 0 0;
z-index:300;
}
.card-notify-badge {
position: absolute;
left: -10px;
top: -20px;
background: #f2d900;
text-align: center;
border-radius: 30px 30px 30px 30px;
color: #000;
padding: 5px 10px;
font-size: 14px;
z-index:300;
}
