Animated caption with Hover

Question

I have an image and added an interactive caption to it.

I created the div class="legenda_interna" the same image size. I only display 30% the size of it and the rest I want to hide. I want to show only the snippet with the button.

When I pass the mouse, the :hover displays all the content.

Look at 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>
<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>

How could I hide the content after the button and display it only when passing the mouse over the div?

Answer 1

Add the property to:

.legenda_interna{
   ...
   overflow:hidden; /* isto vai esconder todo o conteúdo que seja filho deste que possa sair fora deste elemento
   ...
}

Answer 2

Add to your div with the class .principal the property overflow: hidden.