How to Create Image Boxes with Text Overlays

Spice up intrigue around your content assets with these simple image boxes and text overlays.

One of the most important inbound marketing strategies for any organization is content marketing. The quality of content itself remains the most important part, but how that content is presented to readers can also be a major part in its success.

Rather than list your content assets as a series of links on a page, try these image boxes with text overlays. It's a great way to associate eye-catching visual elements with your website's content elements. Here's how to build out these image boxes for your own website:

HTML

<div class="section4 newsroom">
	<div class="container">
		<h2 class="text-center display-3 my-5">Solodev News</h2>
		<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 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 launches new website</h4></a>
					  <a href="#"><h4 class="title-hover">Solodev Launches an Enticing Website to Match Vibrant City</h4></a>  
					</div>
				  </div>
					<img alt="" class="img-responsive cover" src="https://raw.githubusercontent.com/solodev/news-images-with-text-overlays/master/image-01.jpg" />
				</div>
			</div>
			
			<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 earns national recognition</h4></a>
					  <a href="#"><h4 class="title-hover">Solodev Earns National Recognition as Marketing and Commerce CMS Leader</h4></a>  
					</div>
				  </div>
					<img alt="" class="img-responsive cover" src="https://raw.githubusercontent.com/solodev/news-images-with-text-overlays/master/image-03.jpg" />
				</div>
			</div>
			
			<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 helps websites handle traffic surges</h4></a>
					  <a href="#"><h4 class="title-hover">Solodev helps websites to prep for website traffic surges</h4></a>  
					</div>
				  </div>
					<img alt="" class="img-responsive cover" src="https://raw.githubusercontent.com/solodev/news-images-with-text-overlays/master/image-04.jpg" />
				</div>
			</div>			  
		</div>
		<!--close row-->
		<p class="text-center"><a href="#" class="btn btn-danger rounded-0 text-white">All News Articles</a></p>
	</div>
</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;
	}
}

JAVASCRIPT

$('.news-title').text(cut(50)).append("...");

function cut(n) {
  return function textCutter(i, text) {
    var short = text.substr(0, n);
    if (/^\S/.test(text.substr(n)))
        return short.replace(/\s+\S*$/, "");
    return short;
  };
}

Don't forget to adjust the screen size in various sizes to see how the design responds on mobile devices!

Download from Github

Share on Facebook Tweet It