{"id":896,"date":"2018-06-01T20:21:09","date_gmt":"2018-06-01T20:21:09","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=896"},"modified":"2026-04-02T09:52:47","modified_gmt":"2026-04-02T09:52:47","slug":"responsive-image-overlay-over-another-image","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/responsive-image-overlay-over-another-image\/","title":{"rendered":"Responsive Image Overlay over Another Image"},"content":{"rendered":"<p>I was working on a gaming site which would have two modes to play and a title for each game.\u00a0I 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.<\/p>\n<p>Bootstrap 4 was used for overall responsive behavior in the site and the additional CSS required to handle individual game\u00a0title is as following<\/p>\n<pre class=\"lang:default decode:true\">.overlay-container { position: relative; overflow: hidden; }\r\n.overlay-top{ height: 33%; position: absolute; top: 0; width: 100%; }\r\n.overlay-middle{ height: 33%; position: absolute; top: 33%; width: 100%; }\r\n.overlay-bottom{ height: 33%; position: absolute; top: 66%; width: 100%; }\r\n.title { text-align: center; margin-left: auto; display: block; margin-right: auto; max-width:100%;}\r\n.play { text-align: center; margin-left: auto; display: block; margin-right: auto; max-width:80%; }\r\n.img-responsive{ width: 100%; }<\/pre>\n<p>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.<\/p>\n<p>See below for\u00a0the working example<\/p>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/www.netexl.com\/blog\/demo\/12\/index.html\" width=\"100%\" height=\"500\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>Click\u00a0<a href=\"https:\/\/www.netexl.com\/blog\/demo\/12\/index.html\" target=\"_blank\">here<\/a>\u00a0to check this on your system. Try changing the browser window size to see how it works.<\/p>\n<p>The complete code for this is as following<\/p>\n<pre class=\"lang:default decode:true \">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"utf-8\" \/&gt;\r\n    &lt;title&gt;Responsive Image Overlay&lt;\/title&gt;\r\n    &lt;meta http-equiv=\"Content-type\" content=\"text\/html; charset=utf-8\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no\"&gt;\r\n    &lt;link rel=\"stylesheet\" href=\"bootstrap-grid.min.css\"&gt;\r\n    &lt;style&gt;\r\n       .overlay-container { position: relative; overflow: hidden; }\r\n       .overlay-top{ height: 33%; position: absolute; top: 0; width: 100%; }\r\n       .overlay-middle{ height: 33%; position: absolute; top: 33%; width: 100%; }\r\n       .overlay-bottom{ height: 33%; position: absolute; top: 66%; width: 100%; }\r\n       .title { text-align: center; margin-left: auto; display: block; margin-right: auto; max-width:100%;}\r\n       .play { text-align: center; margin-left: auto; display: block; margin-right: auto; max-width:80%; }\r\n       .img-responsive{ width: 100%; }\r\n    &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;div class=\"container-fluid\"&gt;\r\n        &lt;div class=\"row\"&gt;\r\n            &lt;div class=\"col-6 col-sm-4 col-md-3\"&gt;\r\n                &lt;div class=\"overlay-container\"&gt;\r\n                    &lt;img alt=\"\" src=\"board.png\" class=\"img-responsive\"&gt;\r\n                    &lt;div class=\"overlay-top\"&gt;\r\n                        &lt;img src=\"title.png\" class=\"title\" \/&gt;\r\n                    &lt;\/div&gt;\r\n                    &lt;div class=\"overlay-middle\"&gt;\r\n                        &lt;img src=\"local.png\" class=\"play\" \/&gt;\r\n                    &lt;\/div&gt;\r\n                    &lt;div class=\"overlay-bottom\"&gt;\r\n                        &lt;img src=\"computer.png\" class=\"play\" \/&gt;\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=\"col-6 col-sm-4 col-md-3\"&gt;\r\n                &lt;div class=\"overlay-container\"&gt;\r\n                    &lt;img alt=\"\" src=\"board.png\" class=\"img-responsive\"&gt;\r\n                    &lt;div class=\"overlay-top\"&gt;\r\n                        &lt;img src=\"title.png\" class=\"title\" \/&gt;\r\n                    &lt;\/div&gt;\r\n                    &lt;div class=\"overlay-middle\"&gt;\r\n                        &lt;img src=\"local.png\" class=\"play\" \/&gt;\r\n                    &lt;\/div&gt;\r\n                    &lt;div class=\"overlay-bottom\"&gt;\r\n                        &lt;img src=\"computer.png\" class=\"play\" \/&gt;\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=\"col-6 col-sm-4 col-md-3\"&gt;\r\n                &lt;div class=\"overlay-container\"&gt;\r\n                    &lt;img alt=\"\" src=\"board.png\" class=\"img-responsive\"&gt;\r\n                    &lt;div class=\"overlay-top\"&gt;\r\n                        &lt;img src=\"title.png\" class=\"title\" \/&gt;\r\n                    &lt;\/div&gt;\r\n                    &lt;div class=\"overlay-middle\"&gt;\r\n                        &lt;img src=\"local.png\" class=\"play\" \/&gt;\r\n                    &lt;\/div&gt;\r\n                    &lt;div class=\"overlay-bottom\"&gt;\r\n                        &lt;img src=\"computer.png\" class=\"play\" \/&gt;\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=\"col-6 col-sm-4 col-md-3\"&gt;\r\n                &lt;div class=\"overlay-container\"&gt;\r\n                    &lt;img alt=\"\" src=\"board.png\" class=\"img-responsive\"&gt;\r\n                    &lt;div class=\"overlay-top\"&gt;\r\n                        &lt;img src=\"title.png\" class=\"title\" \/&gt;\r\n                    &lt;\/div&gt;\r\n                    &lt;div class=\"overlay-middle\"&gt;\r\n                        &lt;img src=\"local.png\" class=\"play\" \/&gt;\r\n                    &lt;\/div&gt;\r\n                    &lt;div class=\"overlay-bottom\"&gt;\r\n                        &lt;img src=\"computer.png\" class=\"play\" \/&gt;\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>You can download example code <a href=\"https:\/\/github.com\/ngdevr\/DemoResponsiveOverlay\" target=\"_blank\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was working on a gaming site which would have two modes to play and a title for each game.\u00a0I 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\u00a0title 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[&#8230;]<\/p>\n","protected":false},"author":5,"featured_media":1539,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,23],"tags":[],"class_list":["post-896","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-html"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/comments?post=896"}],"version-history":[{"count":3,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/896\/revisions"}],"predecessor-version":[{"id":899,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/896\/revisions\/899"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/1539"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}