Question

I have a div, and it randoms the content from database. The content can be text or video and keep in a div.

And I want to show the Read more text, whenever the user hover on the text or a video as example of Video Manager below:

Any suggestion please.

Answer 1

there are many tutorials for that you can start searching them, maybe this tutorial might help watch out demos http://www.backslash.gr/demos/contenthover-jquery-plugin/#demo1

HTML

<img id="d1" src="photos/1.jpg" width="300" height="240" />
<div class="contenthover">
    <h3>Lorem ipsum dolor</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat. </p>
    <p><a href="#" class="mybutton">Lorem ipsum</a></p>
</div>

CSS

.contenthover { padding:20px 20px 10px 20px; }
.contenthover, .contenthover h3, contenthover a { color:#fff; }
.contenthover h3, .contenthover p { margin:0 0 10px 0; line-height:1.4em; padding:0; }
.contenthover a.mybutton { display:block; float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.contenthover a.mybutton:hover { background:#34742d }

Jquery script:

$('#d1').contenthover({
    overlay_background:'#000',
    overlay_opacity:0.8
});