How to display text on image when mouse over
How to display text on the image when mouse over or hover? Not just add a title attribute to the image element. This example helps you showing a text in the center of the image.
Codes as the following:
<style type="text/css" media="screen">
.image-container { width: 320px; height: 175px; margin: 5px; float: left; overflow: hidden; position: relative; } .image-container a > span{
opacity: 0;
width: 100%;
height: 100%;
position:absolute;
z-index: 1;
left: 0;
top: 0;
text-align:center;
line-height: 175px;
}
.image-container a:hover img{
opacity: 0.25;
}
.image-container a:hover span {
opacity: 1;
}
</style>
<div class="image-container"><a href="https://www.waytowp.com" target="_blank">
<img class="alignnone size-full wp-image-69" alt="display-text-on-image-demo" src="https://www.waytowp.com/wp-content/uploads/2014/03/display-text-on-image-demo.jpg" width="292" height="178" />
<span>CLICK FOR MORE DETAILS</span>
</a></div>
Post a Comment