What could be causing my transform scale to not function properly in Bootstrap?

As a complete beginner, I am currently in the process of learning bootstrap. I have noticed that the animation breaks when I apply it, specifically the scaling part. Interestingly, the animation works perfectly fine without Bootstrap. I am wondering if there are any alternative solutions?

HTML

    <main class="row g-0 align-items-center">
        <div class="col-md-6 g-0 ">
            <div class="left_side text-center ">
                <h1 class="titulo_index">¿Quienes Somos?</h1>
                <p class="texto_index">Desde 1933 tostamos nuestro propio café.
            Lo cuidamos desde la selección de sus granos, hasta la taza, conservando el amor y el respeto que tenemos por lo que hacemos, desde el primer día. Por eso nuestro café es <strong> ÚNICO.</strong>
                </p>
                <a id="i_link" class="index_link" href="menu.html">¡Conoce nuestro menu!</a>
            </div>
        </div>
    </main>

CSS

.index_link{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 40px;
    padding: 10px 20px 10px 20px;
    width: 400px;
    color: black;
    background-color: #d99771;
    border: #442b0c 2px solid;
    border-radius: 25px;
    text-align: center;
    text-transform: capitalize;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 3px 5px 3px black;
}
.index_link:hover{
    background-color: #dbb098;
    scale: 1.2;
    box-shadow: 10px 10px 8px black;
}

Answer №1

The issue arises because the a element has a display: inline; property.
To resolve this, you can simply add either .d-block or .d-inline-block classes to apply the scaling effect.

<a id="i_link" class="index_link d-inline-block" href="menu.html">Discover our menu!</a>

.index_link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 40px;
  padding: 10px 20px 10px 20px;
  width: 400px;
  color: black;
  background-color: #d99771;
  border: #442b0c 2px solid;
  border-radius: 25px;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 3px 5px 3px black;
}

.index_link:hover {
  background-color: #dbb098;
  scale: 1.2;
  box-shadow: 10px 10px 8px black;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a667a66">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"></link>


<main class="row g-0 align-items-center">
  <div class="col-md-6 g-0 ">
    <div class="left_side text-center ">
      <h1 class="titulo_index">Who Are We?</h1>
      <p class="texto_index">Since 1933 we have been roasting our own coffee. We take care from selecting the beans to the cup, preserving the love and respect we have for what we do from day one. That's why our coffee is <strong> UNIQUE.</strong>
      </p>
      <a id="i_link" class="index_link d-inline-block" href="menu.html">Discover our menu!</a>
    </div>
  </div>
</main>


<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0e0303181f181e0d1c2c59425e425e">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

Alternatively, you can adjust the display property in your CSS.

.index_link {
  
  display: inline-block;

}

.index_link {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 40px;
  padding: 10px 20px 10px 20px;
  width: 400px;
  color: black;
  background-color: #d99771;
  border: #442b0c 2px solid;
  border-radius: 25px;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 3px 5px 3px black;
}

.index_link:hover {
  background-color: #dbb098;
  scale: 1.2;
  box-shadow: 10px 10px 8px black;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7875756e696e687b6a5a2f34283428">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"></link>


<main class="row g-0 align-items-center">
  <div class="col-md-6 g-0 ">
    <div class="left_side text-center ">
      <h1 class="titulo_index">Who Are We?</h1>
      <p class="texto_index">Since 1933 we have been roasting our own coffee. We take care from selecting the beans to the cup, preserving the love and respect we have for what we do from day one. That's why our coffee is <strong> UNIQUE.</strong>
      </p>
      <a id="i_link" class="index_link" href="menu.html">Discover our menu!</a>
    </div>
  </div>
</main>


<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="66040909121512140716265348544854">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

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

exciting, showcasing a dependency map using svg within an html5 environment

I am working on creating a polygon background for my menu, which needs to be responsive in design. Here is an example of what I am trying to achieve: example image. Should I use JavaScript to listen for size changes and adjust the points for the polygon e ...

Positioning the video tag bar in HTML is a crucial element to

**Take a look at what I'm discussing here(http://jsfiddle.net/VpLyR/). I'm dealing with a simple code that includes a video tag (html) and a menu bar with a fixed position. The issue arises when I scroll down to the point where both the menu bar ...

Displaying live data from an XMLHttpRequest in a Vue component in real-time

I'm currently working on implementing lazy loading for a list of posts fetched from the WordPress REST API. My goal is to load additional news stories upon clicking an HTML element. However, I'm facing issues with accessing the original Vue inst ...

Error: Unrecognized HTML, CSS, or JavaScript code detected in template

I'm currently utilizing the "Custom HTML Tag" option in GTM with my code below, but encountering an error when attempting to publish: Invalid HTML, CSS, or JavaScript found in template. It seems that GTM may not support or recognize certain tag attri ...

The dimensions of the box remain fixed and do not change when the screen is resized

Just starting out with HTML and CSS and trying to create a responsive website. Running into an issue where the black striped box on my page is not moving up when I resize the screen. It appears to be stuck in place, causing a gap between it and the slide s ...

Unable to examine a specific component

As I attempt to inspect an element by right-clicking and selecting "Inspect," I encounter the following details: Screenshot1 Screenshot2 Despite trying the code snippet below, it did not yield the desired results for me: driver.findElement(By.id("tmsMo ...

Inserting a picture using CSS

I attempted to include an image in a footer div, but I have not been successful with the following approach: Here is the HTML code I tried: <footer> <div class="imagenFooter" style="background-image: url(&quot;./images/footer-bg.jpg&quo ...

How can we prevent the navigation from fading out when scrolling back up, as JQuery control the opacity of the Nav to fade in?

Looking for some guidance on jQuery assistance. I currently have a fixed navigation bar at the top of my webpage with an initial opacity set to 0 upon page load. As the user scrolls down, I want the navigation bar to fade in using the following code: fun ...

Tap the image to open it in a new window for a closer look

After retrieving data from the database, which includes images and other fields, I am trying to figure out how to make it so that when users click on an image, it opens in a new window. Below is the code snippet I have: <a target="_blank" href="#"> ...

Tips for creating a unique custom rounded underline effect in an Angular Material Tab

Our design team has requested that we incorporate underlines that resemble the top half of a rectangle with rounded corners. We are currently using Angular Material, but I am facing difficulties in styling the existing tabs component (https://material.angu ...

CSS: selecting the adjacent siblings of a certain class, starting from the first and

I am working on achieving the following goal: https://i.sstatic.net/xHoIG.png Elements containing values should have a gray 'ribbon'. Elements with values are given a class selected, while elements without any value do not have this class. Thi ...

Is it possible to make a div's width 100% until a certain point, and then change it to 30% beyond that breakpoint?

I am trying to work with a div element <body style="width: 100vw; height: 100vh"> <div id="containerDiv"> <div id="canvasDiv" /> </div> </body> My goal is to adjust the width of canvasDiv based on the screen size. ...

Experiencing an issue of receiving an undefined value while attempting to retrieve a value from an input box

HTML: <input value='Rename' type='button' onclick='RenameGlobalPhase({$row['id']});' <span id='renameGlobalPhase{$row['id']}'>" . $row['phase'] . "</span> Below you wil ...

Building custom elements through static compilation

I enjoy using custom elements to efficiently organize the content on a webpage, focusing on semantics rather than getting caught up in the technical details. It seems that in order to utilize custom elements, I have to either depend on JavaScript or use m ...

Can you identify the programming language used in this code snippet? - {"html":"<section class="page">

I've been approached to assist with a friend's company website since the original developer seems to have disappeared. Apologies if this question is too basic for this forum, and please forgive me if I am not in the right place to ask it. The m ...

Ensure all vertically stacked boxes maintain the same height using Flexbox technology

My design includes a series of links styled as larger boxes, with varying content and height. Using flexbox to ensure equal heights on each row is straightforward. I'm utilizing the Bootstrap grid layout, but when the boxes stack vertically (one per r ...

Reposition icons accordingly while incorporating a new set of icons

After creating a new icon set font, I noticed that the icons are not positioning correctly and appear smaller than expected when loaded: https://i.stack.imgur.com/1OsAL.png https://i.stack.imgur.com/zmLQq.png I attempted to adjust the .icon class by add ...

Triggering transitionend event once with an added if condition

Currently, I have an application of an if statement that examines whether an element contains a style attribute. In the event that the style attribute is absent, it appends inline styling. Conversely, if the style attribute exists, it is removed. Furthermo ...

What could be causing my JSON product list to not load properly?

My list is not loading and I can't figure out why. I've included my json, jquery, and HTML below. The console isn't showing any errors, but the list is still blank. Any help would be greatly appreciated as I am new to working with json. Than ...

When you hover over it, the text moves above the background content

I am looking to enhance my table by having the text expand and hover over the content with a white background. I have achieved the expand effect, but I am struggling to get the overflow to work properly. You can view the code in action on JsFiddle: JsFiddl ...