0

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?

1
  • 1
    já tentou usar a propriedade overflow:hidden? Commented 18/05/2016 às 17:18

2 Respostas 2

1

Adicione na sua div com a classe .principal a propriedade overflow: hidden.

2
  • Já vi muitos códigos utilizando este atributo e nunca sabia o porque do seu uso. Agora sei qual é rsrs Obrigado!
    – Zkk
    Commented 18/05/2016 às 19:19
  • 1
    Sim ela é muito utilizada para criar slides e outros tipos de animações, dá pra criar efeitos bem legais com ela. Commented 18/05/2016 às 19:20
1

Adicione a propriedade em:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .