JSFiddle - React, Tailwind, and code Playground

by krish reddy

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);"></script>
<script src="@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700);"></script>
<div class="container">
			<div class="row">
				<div class="blog-item col-lg-4 col-md-4 col-sm-4">
					<div class="image">
						<img src="http://3.bp.blogspot.com/-E3B9ce7Ck20/UFBfFrkbV8I/AAAAAAAADX8/fFMHEyZcZDg/s400/Animated-Wallpapers.jpg">
						<div class="overlay">
                            <a href="#">
                                <i class="fa fa-plus"></i>
                            </a>

						</div><!-- /.overlay -->
                        </div><!-- /.image -->
						<h3>Welcome to A Safer World</h3>
						<p>Lorem ipsum dolor sit amet, consectetur         adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				</div><!-- /.blog-item -->
			</div><!-- /.row -->
		</div><!-- /.container -->

CSS

.blog-item{
    overflow: hidden;
}
.image{
    position: relative;
    overflow: hidden;
}
.image .overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #49c8ff;
    top: 0px;
    opacity: 0;
    
    transition:         all 400ms ease-in-out;
    -moz-transition:    all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    -o-transition:      all 400ms ease-in-out;
    -ms-transition:     all 400ms ease-in-out;
}
.blog-item:hover .overlay{
    opacity: 1;
}
.blog-item h3,
.blog-item p{
    font-family: "Source Sans Pro";
    font-weight: 400"
    
}
.overlay a{
    width: 35px;
    height: 35px;
    border: 1px solid #fff;
    position: absolute;
    display: block;
    margin: 0 auto;
    left: 0px;
    right: 0px;
    border-radius: 100%;
    top:30%;
    text-align: center;
    
        transition:         all 400ms ease-in-out;
    -moz-transition:    all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    -o-transition:      all 400ms ease-in-out;
    -ms-transition:     all 400ms ease-in-out;
}
.image:hover a{
    top: 40%;
    
    -webkit-transform: rotate(180deg);
					-moz-transform: rotate(180deg);
					-o-transform: rotate(180deg);
					-ms-transform: rotate(180deg);
					transform: rotate(180deg);
}
.overlay a:hover{
background-color: #297595;
border: 1px solid #297595;
}
.overlay a i{
    color: #fff;
    position: relative;
    top: 7px;
}