text exceeds the desired limit

Asked

Viewed 63 times

0

Well I’m trying to make an animation in css3, only the text crosses the line, I wanted it to stay inside the object, and when I touch the object, it increases accordingly, with the object. but he leaves the header

The code:

    <head>
 <link rel="stylesheet" href="main.css">
 <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet"> 
    </head>
    <body>
<header class="inicio">
 <h1>Olá, bom, eu estou tentando aprender, então isso é um teste (obviamente) eu espero que fique bom!! haha.</h1>
</header>
    </body>
</html>

.inicio {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #da8d8b;
  margin: auto;
  transition-property: width height border-radius background-color border border-bottom border-top;
  transition: 2s, 1s, 1s, 2s;
  
}


.inicio:hover {
    width: 400px;
    height: 200px;
    border-radius: 1rem;
    background-color: #c97e7b;
    
  
}

h1 {

    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
    color: rgba(427, 275, 271, 0.1);
    display: inline-block;
    word-break: break-all;
}

header {
    word-wrap: break-word;
}
html5 css3 animation header hover

1 answer

0

You can use the css Scale() to make the text appear the same way as the header. Use Scale(0) to fully hide the element and when you hover over the header set Scale(1) so that it appears fully, add a transition to be more beautiful and ready, at the end you will have something like this:

.inicio:hover h1 {
  transform: scale(1);
}
.inicio h1 {
  // ...
  transform-origin: top;
  transform: scale(0);
  transition: 2s;
}

Browser other questions tagged html5 css3 animation header hover

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