The idea is just to overlay some text over an image. Here is a very simple tutorial to design image overlays in HTML and CSS only. Indeed, who has never wanted to quickly position a text over an image?
The code provided in this article may apply to any website. Simply integrate the HTML code on a page and the CSS code into your stylesheet.
You can find different ways to do it on the internet, but I wanted to synthesize everything I found to extract a minimal and above all clean solution.
What is an image text overlay?For me, an overlay is just a layer put on top of another. In HTML, it means that it is out of the flow, because it has to be positioned over another element, which is not possible with the default behaviour.
Note: I'm not talking here about text over a background image, which is standard in HTML, but text over an image element (the img tag).The HTML code
Putting the image in as a background image of the wrapping div would be easier, but in this scenario I see the images as content, and thus belongs in the HTML. We’ll use that wrapping div as a container for absolute positioning.
<div class="media"></div>
<div class="media"><a href="#"><img alt="" class="img-fluid media-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHDCwRr0FSNF3mgqykE2BKtuVKttYP0F82DLOITe-7FpShErhtnaoHUZiocAyc8fXMf-gHQVtKq3JlYFKZf_Vz3TqcYUMZmAQtuBIf2dA2yOJwlJ7jfvKs9P3K-nIChKkeEjT-NA7Xlx87/w800-h450-p-k-no-nu/web-design-3.jpg"/>
<div class="media-body">
<h1>Post Title</h1>
<p>Your content...</p>
</div></a>
</div>
The CSS code:
I tried to factorize the code to make it simple, readable, compact and easily usable.
.media {display:inline-block;position:relative;vertical-align:top;}
.media-image {display:block;}
.media-body {background:rgba(48,56,67,0.9);bottom:0;color: white;font-size:1em;left:0;opacity:0;overflow:hidden;padding:3.75em 3em;position:absolute;text-align:center;top:0;right:0;-webkit-transition:0.6s;transition:0.6s;}
.media-body:hover {opacity:1;}
.media-body:after,
.media-body:before {border: 1px solid #777;bottom:1em;content: '';left:1em;opacity:0;position:absolute;right:1em;top:1em;-webkit-transform:scale(1.5);-ms-transform: scale(1.5);transform:scale(1.5);-webkit-transition:0.6s 0.2s;transition:0.6s 0.2s;}
.media-body:before {border-bottom:none;border-top:none;left:2em;right:2em;}
.media-body:after {border-left:none;border-right:none;bottom:2em;top:2em;}
.media-body:hover:after,
.media-body:hover:before {-webkit-transform:scale(1);-ms-transform: scale(1);transform:scale(1);opacity:1;}
.media-body:hover:before {-webkit-transform:scale(1);-ms-transform: scale(1);transform:scale(1);opacity:1;content:"\e095";font-family:"Glyphicons Halflings";font-size:50px;line-height:1;margin:0px;display:inline-block;padding-right:5px;}
.media-body h2 {margin-top:0;color:#fff;}
.media-body p {margin-bottom:1.5em;color:#fff;}
