(tip) Add a text overlay to any image on mouse hover

[George H. Compton IV]

Responsive image overlay, HTML & CSS.. This code adds a linkable text overlay to any image on mouse hover.  See image below.
Replace the image link and the link you want the text to take you to, then change the text to whatever you prefer.

This divide goes in any HTML box and the CSS goes in your design studio css section

<div class="img-hover-overlay">
<img src="http://your.imge.link.jpg" />
<div class="overlay">
<a href="http://your.text.link.com" target="_blank">
<span>This is some text I want to display</span></a></div>
</div>

/* GEOCOMs image overlay */
DIV.img-hover-overlay {
    width:100%;
    display:block;
    position:relative;
    text-align: center!important; }
DIV.img-hover-overlay .overlay {
    position:absolute;
    top:45%;
    width:0;
    width:100%;
    height:50%;
    padding:10px;
    background-color:rgba(0, 0, 0, 0.3);
    display:none; }
DIV.img-hover-overlay:hover .overlay {
    display:block; }

[George H. Compton IV]

Thank you John, I'm glad someone can use this tip. :-)

[George H. Compton IV]

Thank you John, I'm glad someone can use this tip. :-)

[TJ @ jQueryHelp]

Very nice, George!  Thanks for sharing this.

Best wishes!

"TJ"

[George H. Compton IV]

Thank you TJ and you're welcome.
Best wishes to you as well.