My goal is to create an animation using the transform scale property to enlarge the content of a box. However, I'm facing an issue where the border of the box also increases in size along with the content. I want only the content to change in size without affecting the border. The code snippet looks like this:
HTML:
<span id='box'>content</span>
CSS:
#box{
position: absolute;
left: 240px;
border-bottom: 1px dashed white;
width: 120px;
height: 120px;
text-align:center;
font: bold 90px Tahoma;
color: white;
cursor: pointer;
-webkit-transition: -webkit-transform 0.8s;
}
.explode{
-webkit-transform: scale(1.2);
}
Javascript:
$('#box').addClass('explode');
After adding the explode class, the border of the box also enlarges. Is there a way to resize only the content and not the border?