<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-sm-4">
<div class="news">
<div class="img-figure">
<div class="cat">fashion</div>
<img src="http://136.243.1.253/~creolitic/bootsnipp/fashion.jpg" class="img-responsive">
</div>
<div class="title">
<h1>The start of the web and web design</h1>
</div>
<p class="description">
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden...
</p>
<p class="more">
<a href="#">read more</a><i class="fa fa-angle-right" aria-hidden="true"></i>
</p>
</div>
</div>
</div>
</div>
body {
background: #f2f2f2;
width: 100%;
height: 100%;
margin: 0;
padding: 95px 0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
}
.news {
background: #fff;
position: relative;
overflow: hidden;
z-index:1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
border: 1px solid #eaeaea;
}
.news .img-figure {
position: relative;
}
.news .img-figure img {
position: relative;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.news:hover .img-figure img {
-webkit-transform: scale(1.10);
-moz-transform: scale(1.10);
-ms-transform: scale(1.10);
-o-transform: scale(1.10);
transform: scale(1.10);
}
.news .title {
/*padding: 29px 30px;*/
padding: 45px 30px;
position: absolute;
left: 0;
background: #fff;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.news .title h1 {
margin: 0;
text-transform: uppercase;
font-weight: bold;
font-size: 19px;
/* color: #3D6AA2;*/
text-align: center;
}
.news:hover .title {
margin-top: -90px;
background: #fff;
}
.news p.description {
position: relative;
font-weight: normal;
line-height: 22px;
opacity: 0;
text-align: center;
padding: 15px 30px 0px 30px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.news:hover p.description {
opacity: 1;
}
p.more {
text-align: center;
}
.more a {
position: relative;
font-size: 13px;
margin-top: 30px;
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display: inline-block;
color: #28998b;
}
.more a:after {
content: '';
width: 18px;
height: 1px;
position: absolute;
left: 55px;
top: 9px;
background: #28998b;
vertical-align: middle;
margin-left: 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.news:hover a:after {
width: 30px;
}
.cat {
background: #a0bc9f;
color: #fff;
text-transform: uppercase;
position: absolute;
left: 0;
top: 20px;
z-index: 1;
padding: 3px 15px;
}
