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

exploring div element(s) with jQuery

My HTML page contains multiple div elements in the body. I have also included buttons with associated click functions in jQuery to change the background-color of a div element based on the button pressed. However, I'm facing an issue at the 'term ...

javascriptjqueryhtmlcss

Steps for choosing the nth HTML row with jQuery

I'm facing a situation where I need to be able to select the nth row of an HTML table based solely on the id of the selected row. You can see exactly what I mean by checking out this JSFiddle Demo <table class="mytable1"> <tr><td i ...

javascriptjqueryhtml

Convert JSON data from jQuery into a modal form within a div element

I am currently working on an MVC application and attempting to populate a bootstrap modal form with data from the server. My approach involves: 1) Loading a grid with various IDs, each linked to a javascript onclick function. 2) The function retrieves th ...

jqueryhtmlajax

What is the best way to create a slideshow that automatically starts upon loading and pauses when hovered over?

I have recently set up a div element for my slideshow. I've included a script to enable navigation using next and previous arrows. However, I am looking to add an automatic slideshow feature that stops on hover. As a beginner, I would appreciate any a ...

javascriptjqueryhtmlcsshover

Managing a new browser window using Selenium

I am attempting to automate a download process on a webpage using selenium. Upon clicking a button, a blank popup window appears. After approximately 60 seconds, a link appears within the popup that I want to click on. The code snippet below outlines my ap ...

c#htmlselenium

Is the homepage the only page rendering correctly?

After working on an MVC project for over 6 months, I consistently faced a problem with HTML and CSS. The homepage always rendered correctly, as shown here: http://prntscr.com/tucp1 However, all other pages had strange white spaces between words, like in t ...

htmlcss

The issue of selecting multiple classes simultaneously is not being resolved

Here is my JavaScript code snippet: $('.normal-box').click(function(){ //unique row id var id = $(this).data('row-id'); //its index according to the content array var index = $(this).data('index'); //which car ...

javascriptjqueryhtmlcssangularjs

The art of replacing material-ui styles with styled components

As a newcomer to UI material design, I am eager to create my own customized Button Component using styled-components. I am facing a challenge in overriding the CSS based on different button variations such as "primary" or "secondary". You can find my cod ...

javascriptcssreactjsmaterial-uistyled-components

Looking for a way to scroll images without relying on the marquee tag? Whether you prefer using JavaScript, jQuery,

<marquee> <div class="client"> <img src="images/c1.png"/> </div> <div class="client"> <img src="images/c2.png"/> </div> <div class="client"> ...

javascriptjqueryhtmlcss

How can I show/hide a div based on checkbox click on my website? It works in jsFiddle, but not on my actual site. Any suggestions?

Is there a way to show or hide a div based on a checkbox click? I've got it working in jsFiddle, but for some reason, it's not functioning properly on my website. Any thoughts on how to fix this? My goal is to offer multiple payment methods (cre ...

javascriptjqueryhtmlcss

Is it possible to make a div jump or bounce if it has a flex display?

I'm looking to add some interactive animation to an image inside a div when my mouse hovers over it. To better explain the issue I'm facing, I created a quick representation of what I want to achieve in the code below. My goal is to have the te ...

javascriptjqueryhtmlcssflexbox

Spacing before input text is found to be unnecessary and can be removed

Hello there, I've encountered a slight issue with a text input field that has border radius. The first character typed seems to protrude slightly outside the input field due to the border radius. Is there a way to add some extra whitespace before the ...

htmlcss

Here, it is possible for the padding-right value to be equal to zero

I am relatively new to CSS and I am currently in the process of testing and experimenting to better understand how it works. For instance, in the code snippet provided, we see that the selector .box h3 has a padding: 6px 10px 4px 10px;. Therefore, the pad ...

css

Creating a Drop-Down Button Using HTML, CSS, and JavaScript

I am currently working with the following code: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=PT+Sans ...

javascripthtmljquerycssreactjs

Designing a calendar with a grid template

I am attempting to design a calendar that resembles an actual calendar, but I am facing an issue where all created divs (representing days) are being saved in the first cell. I am not sure how to resolve this. Any help would be greatly appreciated. css . ...

javascriptcssreactjscalendar

Styling a Pie or Doughnut Chart with CSS

I am working on creating a doughnut chart with rounded segments using Recharts, and I want it to end up looking similar to this: Although I have come close to achieving the desired result, I am encountering some issues: Firstly, the first segment is over ...

javascriptcssreactjsnext.jsrecharts

The solution to enabling multiple inputs when multiple buttons are chosen

Below is a link to my jsfiddle application: http://jsfiddle.net/ybZvv/5/ Upon opening the jsfiddle, you will notice a top control panel with "Answer" buttons. Additionally, there are letter buttons, as well as "True" and "False" buttons. The functionali ...

javascriptjqueryhtml

Accordion styling using CSS

My current issue lies with setting the style for the contents of an accordion. The problem arises when the styles defined in a CSS file do not take effect on the content of my accordion when using the following code along with a separate CSS file: <scr ...

jqueryhtmlcss

Canvg | Is there a way to customize canvas elements while converting from SVG?

Recently, I encountered an issue with styling SVG graphics dynamically generated from data. The SVG graphic appears like this: To address the problem, I turned to Canvg in hopes of converting the SVG into an image or PDF using a hidden canvas element. How ...

javascriptcsscanvassvgcanvg

The main page wrapper will be centered on all devices except for tablets, where it will appear

I have set up a main container, #main, for my page content with a central position. It is positioned absolutely to create some space above the container. Centering is achieved using negative margins and left:50% instead of margin:auto. However, the issue a ...

androidhtmlcss