Looks like some of your html code is missing because you have classes defined in css that are not used in the html code. Your animation is only available for the selectors .shadow-section :hover and .saiba-mais-2.
You have to add one of these classes somewhere or apply the animation for .shadow as well or for the links. This is why you don’t see an animation.
This would work. You can modify the code as you wish:
.shadow {
display: block;
margin-top: 50px;
border-radius: 10px;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 75px;
font-size: 14px;
min-width: 300px;
max-width: 350px;
height: 450px;
background-color: white;
box-shadow: 2px 2px 6px #4d4d4d;
}
.shadow-section :hover {
animation-name: estica;
animation-duration: 2s;
}
.saiba-mais-2 :hover {
animation-name: estica;
animation-duration: 2s;
}
.shadow img {
display: inline-block;
border-radius: 10px;
width: 300px;
display: block;
margin-left: auto;
margin-right: auto;
}
.shadow h4 {
font-size: 18px;
color: #4d4d4d;
text-align: left;
margin-left: 10px
}
.shadow h2 {
margin-top: 30px;
padding-bottom: 40px;
text-align: left;
color: #C763FE;
margin-left: 10px;
}
.shadow a {
display: block;
background: wheat;
}
.shadow a:hover {
color: #C763FE;
animation-name: estica;
animation-duration: 2s;
}
.shadow h2 :hover {
color: rgb(117, 106, 122)
}
@keyframes estica {
0% {
width: 100%;
}
100% {
width: 110%;
}
}<div class="shadow">
<div class="Imagem-portfolio">
<img src="./Trabalhos/Yohana.png" alt="Confeiteria Yohana Leonardi">
</div>
<div>
<a target="blanck" href="https://www.instagram.com/yohanaleonardiconfeitaria/">
<h4><small> Confeitaria Artesanal </small></h4>
</a>
<a target="blanck" href="https://www.instagram.com/p/CB51PvPALTw/">
<h2>Yohana Leonardi Confeitaria</h2>
</a>
</div>
</div>I have set the following:
.shadow {
...
min-width: 300px;
max-width: 350px;
...
}
.shadow a {
display: block;
background: wheat;
}
.shadow a:hover {
color: #C763FE;
animation-name: estica;
animation-duration: 2s;
}
Depends on what you want to do exactly. I did not understand it from your description. If you want the parent container .shadow to grow you could do .shadow:hover instead.