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.
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.
/*text overlay effect w3schools.com/howto/howto_css_image_overlay.asp */ <div class="container"> <img class="image" src="https:image here"> <div class="overlay"> <div class="text">Add your overlay text here</div> </div> </div>
/*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;
/*text overlay by w3School*/
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.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%);
}
</style>
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].
Crossfade 