I have an image and I've added an interactive caption to it.
I created the div class="legenda_interna" with the same image size. I only see%% of its size and the rest I want to hide. I want to display only the excerpt with the button.
When I hover the mouse, 30% displays all content.
See the snippet:
html, body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.principal{
border:1px solid black;
width:40%;
height:50%;
background: url('http://imagens.canaltech.com.br/50648.69556-IMagem-Exemplo-Exposicao.jpg') center no-repeat;
background-size:cover;
}
.legenda_interna{
position: relative;
width:100%;
height:100%;
opacity: 0.6;
top: 70%;
background-color: #212c42;
-webkit-transition: ease-out 0.5s;
-moz-transition: ease-out 0.5s;
transition: ease-out 0.5s;
}
.botao_interno{
padding: 8px;
margin-top: 10px;
width: 170px;
background: transparent;
color: white;
border: 2px solid white;
}
.legenda_interna:hover{
top: 0px;
-webkit-transition: ease-out 0.5s;
-moz-transition: ease-out 0.5s;
transition: ease-out 0.5s;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="principal">
<div class="legenda_interna">
<center>
<button class="botao_interno">EXIBIR SOMENTE AQUI</button>
<p style="color:red; margin-top:50px">ESTE CONTEÚDO SÓ APARECE COM O :HOVER</p>
<p style="color:red; margin-top:5px">ESTE CONTEÚDO SÓ APARECE COM O :HOVER</p>
<p style="color:red; margin-top:5px">ESTE CONTEÚDO SÓ APARECE COM O :HOVER</p>
</center>
</div>
</div>How can I hide the content after the button and display it just by hovering over the div?