News images with text overlays

Learn how to create images with text overlays

by vijayweb

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="section4 newsroom">
	<div class="container">
		<div class="row">
			<div class="col-xs-6 col-sm-6 col-md-3">
				<div class="thumbnail" onclick="location.href='#'">
				  <div class="overlay">
					<div class="overlay-inner">
					  <a href="#"><h4 class="news-title">Solodev ranked high on G2 crowd</h4></a>
					  <a href="#"><h4 class="title-hover">Solodev Ranked as High Performer on G2 Crowd Spring List</h4></a>  
					</div>
				  </div>
					<img alt="" class="img-responsive cover" src="https://raw.githubusercontent.com/solodev/news-images-with-text-overlays/master/image-02.jpg" />
				</div>
			</div>
			

			</div>
			
	
		</div>
		<!--close row-->
	</div>

CSS

.section4.newsroom .thumbnail {
	margin-bottom: 30px;
	font-size: 1rem;
}
.section4 .thumbnail {
    position: relative;
    padding: 0;
    border: none;
    margin-bottom: 10px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.section4.newsroom .featured .thumbnail {
	margin-bottom: 15px;
}
.section4.newsroom .thumbnail:hover .news-title-featured {
	display: none;  
}
.section4.newsroom img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.section4 .thumbnail .overlay {
    position: absolute;
    background-color: transparent;
    width: 100%;
    height: 100%;
}
.section4 .thumbnail:hover .overlay-inner {
	background-color: transparent; 
}
.section4 .thumbnail .overlay-inner {
    position: absolute;
    background-color: rgba(0,0,0,0.7);
    bottom: 0px;
    padding: 0 20px;
    width: 100%;
}
.section4.newsroom .thumbnail a {
    text-decoration: none;
}
.section4 .thumbnail .overlay-inner h4 {
    text-transform: inherit;
    font-weight: 300;
    color: #fff;
    font-size: 150%;
    margin-bottom: 1rem;
}
.section4 .thumbnail:hover .overlay {
    background-color: rgba(248, 0, 0,0.8);
    cursor: pointer;
}
.section4 .thumbnail .overlay-inner .title-hover {
  display: none;
}
.section4 .thumbnail:hover .news-title {
  display: none;
}
.section4 .thumbnail:hover .title-hover {
  display: block;
}
.btn{
  font-size:120%;
}
@media only screen and (max-width: 991px) {
    .section4.newsroom .thumbnail {
		font-size: .7rem;
	}
}