Tenho uma imagem e adicionei uma legenda interativa a ela.
Criei a div class="legenda_interna"
com o mesmo tamanho da imagem. Exibo somente 30%
do tamanho dela e o resto quero ocultar. Quero exibir somente o trecho com o botão.
Quando eu passar o mouse, o :hover
exibe todo o conteúdo.
Vejam o 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>
<div class="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>
Como eu poderia ocultar o conteúdo depois do botão e exibí-lo somente ao passar o mouse sobre a div?
overflow:hidden
?