-2

No meu projeto , gostava de fazer uma animação ,quando uma caixa aumenta-se o tamanho, aparecia um texto dentro da caixa. CSS

.dvabout{
    opacity:1;
    float:left;
    margin-top:50px;
    width: 300px;
    height: 100px;
    color:white;
    background:rgba(0,0,0,0.3);
    transition: width 4s,height 4s;
}
.dvallabout{
    color:white;
    transition: opacity 2s;
}

.dvaboutHid1{
    opacity:0;
}

.dvallabout:hover{
    opacity: 1;
    width: 700px;
    height:400px;
}

HTML

<div class="dvallabout">
        
        <div class="dvabout">
    
            <h1>Quem Somos<h1>
            
                    
            <div class="dvaboutHid1">
        
                <h4>
            
                <p>sadadsasd</p>
            
                </h4>
        
        </div>
                
        </div>

        </div>

print1)Inicialmente a imagem esta assim com aquele texto em baixo de "quem somos".

print2)O meu objetivo era ,quando o retângulo aumenta-se aparecer um texto como o que está em baixo do "quem somos".

3

1 Resposta 1

0

Fiz um exemplo:

Codepen

.dvabout {
  opacity: 1;
  float: left;
  margin-top: 50px;
  width: 300px;
  color: white;
  background: rgba(0, 0, 0, 0.3);
  transition: width 4s, height 4s;
}

.dvallabout {
  color: white;
}

.dvaboutHid1 {
  opacity: 0;
  -webkit-transition: 0.1s ease-in;
  -moz-transition: 0.1s ease-in;
  -o-transition: 0.1s ease-in;
  transition: 0.1s ease-in;
  height: 0px;
}

.dvallabout:hover .dvaboutHid1 {
  opacity: 1;
  height: auto;
}
<div class="dvallabout">
  <div class="dvabout">
    <h1>Quem Somos
      <h1>
        <div class="dvaboutHid1">
          <h4>
            <p>sadadsasd</p>
          </h4>
        </div>
  </div>
</div>

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