Display text on image on mouse over using CSS

by Posted on

Here is simple code snippet to display text on image on mouse over using css without javascript.
using this simple line of CSS you can easily add link text on image, So when ever person over mouse on image link text will be display.
imgover
Create sample html

<div class="imgWrap">
 <img src="http://lab.iamrohit.in/cropimg/img.jpg" width="400" height="300" />
<a href="http://www.iamrohit.in" class="link"><span>Rohit Kumar <br/> (My Public Notebook)</span></a>
</div>





After that add css on page to make mouse over effect and place text on image

 <style>
.imgWrap {
    position: relative;
    width: 400px;
    height: 300px;
}
.imgWrap img {
    display: block;
}
.imgWrap .link {
    opacity: 0;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 12px 0px;
    color: #ffffff;
    background: #000000;
    text-decoration: none;
    text-align: center;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
 
}
.imgWrap:hover .link {
    opacity: 0.7;
}
</style>

DEMO



If you like this post please don’t forget to subscribe my public notebook for more useful stuff

Published by admin