-1

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?

12
  • Mas pq o título tem que ficar dentro da tag a??
    – LeAndrade
    Commented 29/07/2018 às 22:28
  • É porque se eu clicar nele quero ir para o mesmo lugar que se clicar na imagem.
    – Sam
    Commented 29/07/2018 às 22:31
  • Sim, mas acho mais fácil clicar em uma imagem do que em um texto não?
    – LeAndrade
    Commented 29/07/2018 às 22:34
  • Mas eu quero que o título também seja um link, não apenas a imagem.
    – Sam
    Commented 29/07/2018 às 22:39
  • 1
    A julgar por esta resposta https://stackoverflow.com/a/7084147/6087092 não me parece que seja possível, pelo menos por enquanto, isto é, utilizando apenas css.
    – Isac
    Commented 29/07/2018 às 23:27

2 Respostas 2

1

Alguns efeitos CSS aplicados ao pai vc não consegue remover dos filhos. Como por exemplo opacity e filters, blend-modes etc.

No caso mais específico do transform, um opção é inverter o que foi aplicado no pai no filho, então se vc aplicou scale-up no pai vc faz um scale-down no filho. Nesse caso nom o :not() vc nao consegue tirar o efeito no filho, como vc mesmo já tentou.

Veja o exemplo com o seu codigo, mas para fazer funcionar precisei colocar o texto dentro de uma tag, no caso usei uma tag p para poder fazer a referencia no css

        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);
}
a:hover p{

   -webkit-transform: scale(0.91);
   transform: scale(0.91);
   margin: 0;
}
a p{
   margin: 0;
}

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">
         <p> Título</p>
      </a>
   </li>
</ul>
<div style="background: gray;">
   <a href="#">Link qualquer</a>
   <button>Botão qualquer</button>
</div>


Exemplo simples do uso do :not(), repare que ao fazer o hover no a todos os p ficam vermelhos, mas not(:first-child) que continua com a cor inicial

a:hover p:not(:first-child){
   color: red
}
<a href="#">
   <p> Título 1</p>
   <p> Título 2</p>
   <p> Título 3</p>
   <p> Título 4</p>
</a>

5
  • Obrigado jovem mas ficou do mesmo jeito... :D
    – Sam
    Commented 29/07/2018 às 22:12
  • Uai aqui no Snippet só a imagem aumentou, o texto desloca um pouco pq a imagem empurra a tag P de baixo que tem o texto. Não sei pq não deu certo ai.
    – hugocsl
    Commented 29/07/2018 às 22:14
  • Creio que fazer scale-down não é uma boa porque o texto acaba tremendo tb. Mas obg, vou tentar algo aqui.
    – Sam
    Commented 29/07/2018 às 22:16
  • @sam sim esse problema de renderização da fonte com esses tipo de efeito é bem comum. Se eu pensar em outra opção te falo
    – hugocsl
    Commented 29/07/2018 às 22:35
  • Votei -1 porque não atendeu a pergunta. Se melhorar eu mudo o voto ok! ;)
    – Sam
    Commented 30/07/2018 às 3:04
1

Consegui resolver colocando uma classe no <a> que não quero que seja afetado:

<a class="links" href="#">

Então altero o a:hover para a:hover:not(.links).

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:not(.links){
   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 class="links" 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>

Você deve fazer log-in para responder a esta pergunta.

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