How to display a div, which will have a summary about the movie (text), and a button for (VIEW MORE) when hovering over an image.
Example:
<a href="#">IMAGEM</a>
When you hover over this link, a div appears to the right with information about that movie.
An example of what I'm talking about is the netflix or telecine play website.
If you are going to do this HTML it is best to use only CSS.
Create a div for each link and its content. Example:
<div class="item">
<a href="">Ver mais</a>
<div class="descricao">Este filme é excelente! Recomendado a todas as idades</div>
</div>
Here you can hide the description with:
.descricao{
display: none;
}
and then make visible when the mouse hover in .item :
.item:hover .descricao{
display: block;
}
If you want to make the effect of appear / disappear with animations you can use CSS transitions.
Example
Something like .show and .hide of jQuery solves this problem:
JS:
$("div.conteudo > img").hover(function() {
$(this).next(".divDoLadoDireito").show(); //hover in
}, function() {
$(this).next(".divDoLadoDireito").hide(); //hover out
});
HTML:
<div id="conteudo">
<img src="images/imagem.jpg" />
<div class="divDoLadoDireito hide">
<p></p>
</div>
</div>