The CSS scale() transform function enlarges or reduces an element proportionally. Applied to a social-sharing link on hover or keyboard focus, scale(1.25) makes the icon and link appear 25% larger. section 11.5.4
Use scale() by choosing the axis values you need:
- Pass one value to scale the element equally along the horizontal and vertical axes. section 11.5.4
- Pass two values to set horizontal scaling first and vertical scaling second. section 11.5.4
- Apply the function through transform, such as transform: scale(1.25);. section 11.5.4
- Remember that an omitted scale() behaves as scale(1), allowing transitions to animate between the normal and enlarged states. section 11.6.1
Magnifying a share link
A social-sharing link can expose its border and grow on hover or focus: .share__link:hover, .share__link:focus-visible { border-color: black; outline: none; transform: scale(1.25); }. Add transition: transform ease-in-out 250ms to the base link rule for a smooth size change. Because the transformed link can extend beyond its container, its background may need to remain synchronized with the container through inheritance or a custom property. section 11.5.4 section 11.6.1
Listing 11.8 Styling the links on hover and focus
.share__link:hover,
.share__link:focus-visible {
border-color: black;
outline: none;
transform: scale(1.25);
}
Inspect the complete hover and focus rule for the magnified share link. section 11.5.4
Listing 11.10 Transitioning the link size change
.share__link:link,
.share__link:visited {
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 48px;
width: 48px;
border-radius: 50%;
border: solid 1px transparent;
transition: transform ease-in-out 250ms;
}
Inspect the base transition that animates the link between scale(1) and scale(1.25). section 11.6.1
