Avoid scale with: hover in link within a li

Navigation
0

I have a code where I want to apply scale to all <a> and <button> , as shown in the example below: 

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><divstyle="background: gray;">
   <a href="#">Link qualquer</a>
   <button>Botão qualquer</button>
</div>

It works perfectly, the problem is that I do not want the "Title" text that accompanies the image within the link in <li> to suffer scale (stay static), just the image.

I have tried to use :not(#lista li a) in some places but to no avail. I think the way is to use this :not somewhere, but I could not do it.

How could I solve this?

    
asked by anonymous 29.07.2018 / 23:39

2 answers

1

I was able to resolve by putting a class in <a> that I do not want to be affected: 

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

Then I change the a:hover to 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><divstyle="background: gray;">
   <a href="#">Link qualquer</a>
   <button>Botão qualquer</button>
</div>
    
30.07.2018 / 01:11
0

Some CSS effects applied to the parent you can not remove from the children. Such as opacity and filters , blend-modes etc.

In the more specific case of transform , one option is to reverse what was applied to the parent in the child, so if you applied scale-up to the parent you make a scale-down to the child. In this case,% w / o% can not take effect on the child, as you have already tried. 

        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><divstyle="background: gray;">
   <a href="#">Link qualquer</a>
   <button>Botão qualquer</button>
</div>

Simple example of using :not() , note that while doing p not all p is red, but :not() is still the initial color 

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>
    
30.07.2018 / 00:05
Class receiving zero value How to search for Id in mongodb With condition