Tenho um código onde quero aplicar scale
em todos os <a>
e <button>
, como mostra o exemplo abaixo:
body{
background: #000;
}
#lista, #lista li{
margin: 0;
padding: 0;
list-style: none;
font-size: 20px;
}
#lista li{
width: 25%;
max-width: 100px;
min-width: 70px;
display: inline-block;
margin: 20px 10px 10px 10px;
vertical-align: top;
}
#lista li a{
color: #fff;
}
#lista li{
-webkit-transition: color .1s ease;
transition: color .1s ease;
}
#lista li img{
width: 100%;
max-width: 100px;
max-height: 100px;
margin-bottom: 10px;
opacity: .9;
-webkit-transition: -webkit-transform 1s ease;
transition: transform opacity 2s ease;
}
#lista li:hover img{
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform .1s ease;
transition: transform opacity .1s ease;
}
a{
text-decoration: none;
color: #e8747d;
display: inline-block;
}
a:hover{
color: #FFFED3;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
button, a{
-webkit-transition: -webkit-transform .1s ease;
transition: transform .1s ease;
cursor: pointer;
}
button:hover{
-webkit-transform: scale(1.18);
transform: scale(1.18);
}
<ul id="lista">
<li>
<a href="#">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/47/Dracula_One_Sheet_Style_F.jpg/220px-Dracula_One_Sheet_Style_F.jpg">
Título
</a>
</li>
</ul>
<div style="background: gray;">
<a href="#">Link qualquer</a>
<button>Botão qualquer</button>
</div>
Funciona perfeitamente, o problema é que eu não quero que o texto "Título" que acompanha a imagem dentro do link no <li>
sofra o scale
(fique estática), apenas a imagem.
Já tentei usar :not(#lista li a)
em alguns lugares mas sem sucesso. Acho que o caminho é usar esse :not
em algum lugar, mas não consegui fazer.
Como eu poderia resolver isso?
a
??