HTML/CSS: Text side overlay on images

I was looking for an HTML zoom effect when I instead came across this overlay effect on the W3School tutorial pages. Both examples will need an “img class” container in the code. The first example contains a URL embedded picture which was pasted into the code after obtaining the online address of the image.

Screen Shot of Copy Image Address of an online image

This is done by right-clicking on an online image and select ‘Copy Image Address’. Make sure the URL address copied ends with .jpg.

The second example is one of my images from my blog Media Library, which was added using the Add Media button in the blog editor.

See HTML code outlined below.

Text Slide via a Left Overlay

Hover the mouse over the picture to see the HTML effect.

Game of Thrones 2017 poster

Hello World

picture of coffee bean I use in my coffee

Hello Coffee

HTML:

/*text overlay effect w3schools.com/howto/howto_css_image_overlay.asp
*/
&amp;amp;lt;div class="container"&amp;amp;gt;
&amp;amp;lt;img class="image" src="https:image here" /&amp;amp;gt;
&amp;amp;lt;div class="overlay"&amp;amp;gt;
&amp;amp;lt;div class="text"&amp;amp;gt;Add your overlay text here&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;

CSS:

/*text hover overlay w3schools.com/howto/howto_css_image_overlay.asp
*/
.container:hover .overlay {
width: 100%;
}

.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;

References

Game of Thrones (2017) poster of Sansa Stark. (2017). [image] Available at: https://winteriscoming.net/2017/06/21/game-of-thrones-season-7-winterishere-12-character-posters/ [Accessed 29 Aug. 2017].

W3schools.com. (n.d.). How To Create Image Hover Overlay Effects. [online] Available at: https://www.w3schools.com/howto/howto_css_image_overlay.asp [Accessed 29 Jul. 2017].