"News Widget"
Bootstrap 3.3.0 Snippet by ariene

<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; }

Related: See More


Questions / Comments: