I was working on a gaming site which would have two modes to play and a title for each game. I decided to display two options on the game logo itself and since the entire website was responsive, I needed to handle some responsive stuff which I wanted to share here.
Bootstrap 4 was used for overall responsive behavior in the site and the additional CSS required to handle individual game title is as following
.overlay-container { position: relative; overflow: hidden; }
.overlay-top{ height: 33%; position: absolute; top: 0; width: 100%; }
.overlay-middle{ height: 33%; position: absolute; top: 33%; width: 100%; }
.overlay-bottom{ height: 33%; position: absolute; top: 66%; width: 100%; }
.title { text-align: center; margin-left: auto; display: block; margin-right: auto; max-width:100%;}
.play { text-align: center; margin-left: auto; display: block; margin-right: auto; max-width:80%; }
.img-responsive{ width: 100%; }
There are 3 overlay images divided equally in height. Top container is set to relative and overlay images sections are set to absolute taking 1/3 height each.
See below for the working example
Click here to check this on your system. Try changing the browser window size to see how it works.
The complete code for this is as following
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Responsive Image Overlay</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="bootstrap-grid.min.css">
<style>
.overlay-container { position: relative; overflow: hidden; }
.overlay-top{ height: 33%; position: absolute; top: 0; width: 100%; }
.overlay-middle{ height: 33%; position: absolute; top: 33%; width: 100%; }
.overlay-bottom{ height: 33%; position: absolute; top: 66%; width: 100%; }
.title { text-align: center; margin-left: auto; display: block; margin-right: auto; max-width:100%;}
.play { text-align: center; margin-left: auto; display: block; margin-right: auto; max-width:80%; }
.img-responsive{ width: 100%; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-6 col-sm-4 col-md-3">
<div class="overlay-container">
<img alt="" src="board.png" class="img-responsive">
<div class="overlay-top">
<img src="title.png" class="title" />
</div>
<div class="overlay-middle">
<img src="local.png" class="play" />
</div>
<div class="overlay-bottom">
<img src="computer.png" class="play" />
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3">
<div class="overlay-container">
<img alt="" src="board.png" class="img-responsive">
<div class="overlay-top">
<img src="title.png" class="title" />
</div>
<div class="overlay-middle">
<img src="local.png" class="play" />
</div>
<div class="overlay-bottom">
<img src="computer.png" class="play" />
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3">
<div class="overlay-container">
<img alt="" src="board.png" class="img-responsive">
<div class="overlay-top">
<img src="title.png" class="title" />
</div>
<div class="overlay-middle">
<img src="local.png" class="play" />
</div>
<div class="overlay-bottom">
<img src="computer.png" class="play" />
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3">
<div class="overlay-container">
<img alt="" src="board.png" class="img-responsive">
<div class="overlay-top">
<img src="title.png" class="title" />
</div>
<div class="overlay-middle">
<img src="local.png" class="play" />
</div>
<div class="overlay-bottom">
<img src="computer.png" class="play" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can download example code here.