There is a logo, the size of 256x256. And there are 2pseudo-elements before and after, which increase the logo and, if necessary, reduce it.

But these pseudo-elements increase the width and height of the parent by the percentage of the increase that they set. How to avoid this, and make that hover work ONLY when you hover on the parent unit?

a.logo{ display: block; width: 256px; height: 256px; max-width: 256px; max-height: 256px; background: url(http://i665.photobucket.com/albums/vv20/Davidmj444/Lion_256x256.png) no-repeat center top; outline: 1px solid lime; position: relative; } a.logo::after { content: ''; position: absolute; top: 0; left: 0; display: block; width: 256px; height: 256px; background: url(http://i665.photobucket.com/albums/vv20/Davidmj444/Lion_256x256.png) no-repeat center top; transform: scale(1.3) rotate(30deg); -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ie-transition: all 0.2s linear; transition: all 0.2s linear; } a.logo:hover::after { transform: scale(1) rotate(0deg); } 
 <a href="" class="logo"></a>

https://jsfiddle.net/mznu4979/

    2 answers 2

    Played, and here is the answer:

    In the normal state for :: before, :: after you need to give:

     visibility:hidden;

    And when you hover

     visibility: visible;

      In the normal state for ::before and ::after you need to give:

       opacity: 0;

      And when you hover:

       opacity: 1;
      • If a block is made to have a transparency of 0, then when you hover to the place where the block is located, the hover will still work. And from this it was necessary to get rid of. - user190134
      • @ user190134 so visibility: hidden; also works itself. - Vadizar
      • visibility is the visibility of an element on a page, and opacity is transparency, these are different properties - user190134
      • @ user190134 in this situation, their action is identical. - Vadizar