I have a problem in formatting an anchor link using the transform scale attributes when hovering on it.
I have a link inside a div (that div is used to alight the link to the right), and i would like to enlarge when I hover on it. However, when i do it, it also increase the body size of the parent div, thus moving all my other elements on the page. Why that happens? As far as I know scale should not act on the size of the elements, least of all on its parent.
Can you tell me where I’m wrong. I’m quite new to html and css, so maybe i completely set up bad my code.
Thanks to anyone who can help me.
a#fonte1 {
font-size: 1rem !important;
font-weight: 300 !important;
transition: transform 0.2s ease !important;
display: inline-block !important;
}
a#fonte1:hover {
transform: scale(1.2) !important;
cursor: pointer !important;
color: rgb(13,89,253) !important;
border: 1px solid rgb(13,89,253) !important;
border-radius: 0.3rem !important;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section class="showcase border-bottom">
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-lg-6 order-lg-2">
...
</div>
<div class="col-lg-6 order-lg-1 ">
<h2>[title 1]</h2>
<p class="mb-0" style = "text-align: justify">
...
</p>
<div style="text-align:right;">
<a id="fonte1" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">
Link
</a>
</div>
</div>
</div>
<div class="row g-0">
<div class="col-lg-6 ">
...
</div>
<div class="col-lg-6 ">
<h2>[title 2]</h2>
<p class="mb-0" style = "text-align: justify">
...
</p>
</div>
</div>
</div>
</section> Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
You are adding a border on hover which changes the size of the element. Add a transparent border on the base state and change its color on hover.
a#fonte1 {
font-size: 1rem;
font-weight: 300;
transition: transform 0.2s ease;
display: inline-block;
border: 1px solid transparent;
}
a#fonte1:hover {
transform: scale(1.2);
cursor: pointer;
color: rgb(13, 89, 253);
border: 1px solid rgb(13, 89, 253);
border-radius: 0.3rem;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section class="showcase border-bottom">
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-lg-6 order-lg-2">
...
</div>
<div class="col-lg-6 order-lg-1 ">
<h2>[title 1]</h2>
<p class="mb-0" style="text-align: justify">
...
</p>
<div style="text-align:right;">
<a id="fonte1" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">
Link
</a>
</div>
</div>
</div>
<div class="row g-0">
<div class="col-lg-6 ">
...
</div>
<div class="col-lg-6 ">
<h2>[title 2]</h2>
<p class="mb-0" style="text-align: justify">
...
</p>
</div>
</div>
</div>
</section>All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0