Hover text over post image in wordpress

Question

I've been trying to find a good, simple solution for this for days now, and I'm coming up empty handed.

I'm trying to make a blog in wordpress, that currently has excerpt with images on the front page. The images are not featured images and they link to the full post. What I really want is for "read more" to appear when i hover over the post image on the front page.

Ideally, I would love to implement one of these codrops hover effects (http://tympanus.net/Development/HoverEffectIdeas/) on the post images if it's possible. I'm very much a newbie to wordpress, so I don't know where to put what code.

But any help would be greatly appreciated.

Answer 1

Try below core code of HTML and CSS:

<style type="text/css">
div.texthover 
{   
    display:block;
    position:relative; 
    width:150px;
}

div.texthover .overlay 
{
    position:absolute;
    top:45%;
    width:100;
    width:150px;       
    background-color:rgba(0, 0, 0, 0.3);
    display:none;width:150px;
}
div.texthover:hover .overlay 
{
    display:block;
}
</style>


<div class="texthover"><br />
    <img src="image.jpg" width="150" height="150" />
<div class="overlay"><br />
    <span>This is some text I want to display</span>
</div>
</div>