I want to do a css animation

Asked

Viewed 47 times

-2

In my project, I would like to make an animation ,when a box increases in size, a text appears inside the box. 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)Initially the image is so with that text below "who we are".

print2)My goal was ,when the rectangle increases appear a text like the one below the "who we are".

html css web-application

  • Here at Stack Overflow Brazil we only accept questions in Portuguese. Translate before it is overturned by mods

  • I can’t understand what you want, it’s this here? Create a [mcve] and show the current result vs expected result.

  • Help?!!!! Please

1 answer

0


I made an example:

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>

Browser other questions tagged html css web-application

You are not signed in. Login or sign up in order to post.