Orion Orion - 3 months ago 16
CSS Question

CSS transition is not working with anchor tag

While working with CSS transition, I see the second block (with class "link1") is not working, but the first block (with class "link") is working. I'm trying to zoom in the text inside anchor tag on hover.

What am I doing wrong?



.link {
width: 100px;
height: 100px;
background: red;
transition: all .5s ease-in-out;
}
.link:hover {
transform: scale(1.2);
}
.link1 {
color: black;
transition: all .5s ease-in-out;
}
.link1:hover {
transform: scale(1.2);
}

<!-- It works.-->
<div class="link"></div>
<br/>

<!-- It does not work-->
<a href=""><span class="link1"><strong>Facebook</strong></span></a>




Answer

It seems scale does not work on inline elements, in this scenario the span.link1. Apply

.link1 { display: inline-block; }

<!DOCTYPE html>
    <html>
    <head>
    <style>
    .link{
        width: 100px;
        height: 100px;
        background: red;
       transition: all .5s ease-in-out; 
    }
    
    .link:hover {
       transform: scale(1.2);
    }
    
    .link1{
     
        color:black;
        display: inline-block;
        transition: all .5s ease-in-out;   
    }
    .link1:hover{
        transform: scale(1.2); 
    }
    
    </style>
    </head>
    <body>
    
    <!-- It works.-->
    <div class="link"></div><br/>
    
    <!-- It does not work-->
    <a href=""> <span class="link1"><strong>Facebook</strong></span></a>
    
    </body>
    </html>

Comments