Applying CSS transformations to scale up a div within its parent body

Having an issue with formatting an anchor link using transform scale attributes on hover.

The link is inside a div that's aligned to the right, and I want it to enlarge when hovered over. However, this increase in size also affects the parent div, causing other elements on the page to move. Why is this happening? Shouldn't scale only affect the element itself, not its parent?

If you can point out where I'm going wrong, I'd appreciate it. I'm new to HTML and CSS, so I might have set up my code incorrectly.

Thanks to anyone who can offer assistance.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="197b76766d6a6a2000000">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iFdUauVt94HftDCEXSoBoQvjIWr WfqylQZjIW3" 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="#">
                        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>

htmlcss

Answer №1

To create a hover effect that changes the size of an element, you can add a transparent border in the base state and then 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474011a051a07">[email protected]</a>/dist/css/bootstrap.min.css" 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="#">
                        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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorrect placement of navigation in HTML/CSS dimensions

I'm working on my new portfolio and I've run into an issue with the navigation placement that I can't seem to solve. The text should be aligned with the lines on the sides, but instead it's shifted right and down. I'm struggling t ...

htmlcss

Is there a method to display text on the screen after a countdown has finished?

I am looking for a way to display some text or an image of a cake on the screen once this countdown reaches zero. It's a countdown leading up to my birthday, and I really want it to have that special touch at the end. However, I've been strugglin ...

htmlcountdown

How do I apply a xPage page style using the styleClass attribute instead of directly using the style attribute

Would like to know how to change the background color of an entire page using styleClass instead of directly in the xp:view tag? Here's an example that works: <xp:view xmlns:xp="http://www.ibm.com/xsp/core" style="background-color:#f1f1f1;"> ...

cssxpageslotus-notes

perform an action if any division element is void of content

Currently, I have a statement that checks if any of the Divs with the ID #Drop are empty. If one is found to be empty, an alert is shown. However, there seems to be an issue where the statement stops working when any div contains content. What I am trying ...

javascriptjqueryhtmlcss

Issue with justify-content in Bootstrap 5 still unresolved

Currently working with Bootstrap 5 and have set up 4 cards. My goal is to position the second card on the left side. I've applied the class justify-content-xl-start to the card, however, it doesn't seem to be functioning as expected. I also attem ...

htmlcsstwitter-bootstrapbootstrap-5

Angular is having trouble with the toggle menu button in the Bootstrap template

I recently integrated this template into my Angular project, which you can view at [. I copied the entire template code into my home.component.html file; everything seems to be working fine as the CSS is loading correctly and the layout matches the origina ...

javascripthtmlangulartypescript

Validating (Update database with correct email and token)

Authentication (Update database if email and token are accurate) Even when the code is incorrect, it displays "Great Success", but the status does not update in my database. However, if I input the correct code, it shows "Great Success" and updates the s ...

phphtmlcssdatabase

Combining left-aligned and centered elements within a grid using flexbox

Looking to create a fluid responsive grid layout using flexbox, without the need for media queries. The number of elements in the grid can vary and each item should have a fixed, equal width with left alignment. The entire group should have equal left and ...

cssflexbox

Can CSS be used to dynamically change the color of an element based on a specific value?

Is it possible to dynamically change the background color of table cells using only CSS based on their values? For example, I am looking to achieve a similar effect as in Excel with conditionally formatted values: https://i.stack.imgur.com/6BsLB.png If ...

htmlcsscolorsconditional-formatting

Use Angular mat-table to dynamically insert data by specifying the row index and column index

I am in the process of constructing a table with a response that includes both the number of rows and the number of columns. Within this table, I possess an array of objects that contain a row index number and a column index number, which I am endeavoring ...

javascripthtmlangularangular-materialmat-table

How can I resolve the issue of React not identifying the prop on a DOM element?

Currently, I am learning React and facing an issue with a warning message: "react-dom.development.js:86 Warning: React does not recognize the isSelected prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell i ...

cssreactjsstyled-componentsreact-props

Resolving the Issue of Missing Placeholders in Form Codeigniter

I am trying to include a placeholder in my input field. However, I am using the form_helper provided by the Codeigniter framework. After adding the placeholder, it does not appear in my input form. I'm not sure if the issue lies in my code or somewhe ...

phphtmlcodeigniterbootstrap-4

Here's a simple script to display a div or popup only once in the browser using plain vanilla JavaScript

// JavaScript Document I'm attempting to make a popup appear in the browser only once. I believe using local storage is the key, but all I can find are solutions involving jQuery. I really want to achieve this using plain JavaScript without relying ...

javascripthtml

Enhancing the style of the top menu Index by applying a border-bottom effect when hovering over it in a CSS Horizontal Drop Down Menu

I'm having trouble adding a border-bottom: 1px solid #FFF to all the top menu (index) items when they are hovered over. Can anyone help me with this? #menu{ padding:0; margin:0; position: fixed; top: 30px; left: 0px; font-size ...

htmlcss

Storing multiple values of dynamically added elements in a single variable and accessing them within a function

Is it possible to store multiple values into a single variable and then access them in a setTimeout function? $(document).ready(function (){ div ({'div':'#noo','auto':'true','pos':'top',' ...

javascriptjqueryhtmlwebsettimeout

Resetting initial values with Velocity.js post-animation

After animating elements into view on a page, I want to defer further animation through CSS classes. However, Velocity keeps all animated properties in the style= tag, hindering CSS transitions. My solution involves resetting the CSS upon completion, but ...

javascriptjquerycssanimationvelocity.js

What is the best way to make a CSS element move with Javascript?

Currently working on a JavaScript game where I am in need of a CSS object to replace the original JavaScript object. Specifically, I want my "sword" CSS object to move along with my player object when it is Unsheathead. All the examples I find only show wh ...

javascripthtmlcss

Adapting the Homepage Based on User Authentication

Currently, I am working on a website where I am implementing a login feature. Once the user logs in successfully, they should be redirected to the index page and see something other than the login button. I have been using the following code for my implem ...

phphtmlsessionbuttonauthentication

Explore the world of HTML by uncovering both the tags and

I am currently focused on enhancing a table I created to allow sorting rows in both ascending and descending order, as well as the ability to rearrange columns through click-and-drag functionality. While the basic structure is working, I am seeking to refi ...

jqueryhtml

JavaScript popup is no more visible on the webpage

Recently, I implemented a pop-up on my website that used cookies to prevent it from appearing every time a user visited a page. However, after making this change, the pop-up stopped showing altogether. Despite my best efforts in testing, researching, and s ...

javascriptjqueryhtmlcss