Dealing with content extending into the previous column within CSS columns

I used this code pen example to perfectly illustrate the concept.

To demonstrate, I applied the following CSS code. Try hovering over the second card in the top row.

.custom-hover:hover {
   transform: scale(1.5);
}

In essence, when the top element of a row other than the first exceeds its boundaries, it appears at the bottom of the preceding column.

Is there a possible solution for fixing this issue?

cssbootstrap-4

Answer №1

<div class="container">
   <div class="row mt-5">

       <div class="col-4 mb-4">
          <div class="custom-hover card shadow test">
              <div class="card-body">
                <p>Greetings</p>
                <p>Greetings</p>
                <p>Greetings</p>
                <p>Greetings</p>
              </div>
          </div>
       </div>

       <div class="col-4 mb-4">
          <div class="custom-hover card shadow test">
              <div class="card-body">
                <p>Greetings</p>
                <p>Greetings</p>
                <p>Greetings</p>
                <p>Greetings</p>
              </div>
          </div>
       </div>

       <div class="col-4 mb-4">
          <div class="custom-hover card shadow test">
              <div class="card-body">
                <p>Greetings</p>
                <p>Greetings</p>
                <p>Greetings</p>
                <p>Greetings</p>
              </div>
          </div>
       </div>

       <div class="col-4 mb-4">
          <div class="custom-hover card shadow test">
              <div class="card-body">
                <p>Greetings</p>
                <p>Greetings</p>
                <p>Greetings</p>
                <p>Greetings</p>
              </div>
          </div>
       </div>

       <div class="col-4 mb-4">
          <div class="custom-hover card shadow test">
              <div class="card-body">
                <p>Greetings</p>
                <p>Greetings</p>
                <p>Greetings</p>
                <p>Greetings</p>
              </div>
          </div>
       </div>

       <div class="col-4 mb-4">
          <div class="custom-hover card shadow test">
              <div class="card-body">
                <p>Greetings</p>
                <p>Greetings</p>
                <p>Greetings</p>
                <p>Greetings</p>
              </div>
          </div>
       </div>

    </div>
</div>

Answer №2

After conducting some research, I discovered a potential Chrome bug. Experimenting with different solutions, I found that the changes below work well on Firefox, Chrome, and even Opera.

.custom-hover:hover{
  transform: scale(1.1);
  border : 1px solid #000000;
  width : 90%;
  margin-left: 10px;
}

If desired, you can opt to remove the border from the design.

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

What causes the off-canvas menu to displace my fixed div when it is opened?

Using the Pushy off-canvas menu from GitHub for my website has been great, but it's causing some trouble with my fixed header. When I scroll down the page, the header sticks perfectly to the top, but once I open the off-canvas menu, the header disappe ...

javascriptjquerycssoff-canvas-menu

Looking for assistance with text alignment?

23 Years Young From: The Boogie Down Bronx Heritage: Puerto Rican Pride Trade: Master Tailor For a demonstration, click on this link ...

htmlcss

What's the best way to add animation to the send icon while hovering over the button?

<div class="text-center"> <button [disabled]="btnStatus" class="btn btn-secondary buttonSend" type="submit"> <div [hidden]="btnStatus"> Send Message&nbsp;&nbs ...

htmlcssangulartypescriptcss-animations

The functionality of the CoreUI breadcrumb navbar became compromised following the inclusion of Bootstrap and Bootstrap-Vue CSS files

I recently incorporated bootstrap and bootstrap-vue into my project using npm. Following that, I included the top two import statements in my App.vue file. However, this seems to disrupt the layout of CoreUI's default horizontal navigation bar. Can an ...

vue.jssassbootstrap-4bootstrap-vue

Add a CSS class to a different element when hovering

I have the following HTML structure: <div class="container"> <div class="list-wrapper"> <ul> <li class="item-first"> </li> </ul> </div> <div class="description-wrapper"> <d ...

javascripthtmlcss

Issues arise when attempting to validate custom or standard radio buttons using Bootstrap 4 and Parsley

Working on a Bootstrap 4 project and implementing Parsley for form validation. Successfully validating text fields and select drop-downs, but facing issues with radio buttons. <div class="mb-3"> <label for="firstname">First ...

bootstrap-4parsley.js

Unable to access property 'map' of undefined - error occurred while processing JSON data in line test.js:11

I'm attempting to utilize the json file in the test component below, but I keep encountering the error: TypeError: Cannot read property 'map' of undefined. I have modified the file within the test.js component, and when testing it with a sa ...

javascriptjsonreactjsbootstrap-4prop

Set the background image width to 75% of the screen size

I want to use this image https://i.sstatic.net/gt30c.jpg as a background for a section on my page. My preference is to have the white part cover only 75% of the screen, stopping before reaching the content in the left grid. Is it possible to achieve this ...

htmlcsstwitter-bootstrap

Click on the logo to return to the home page

Logo Link Causing Menu Alignment Issue After setting the logo as a link, the menu unexpectedly shifts to the right. Upon inspecting the menu element, it appears that there is an additional hidden menu link on the left side leading to index.html. Can anyon ...

htmlcsshyperlink

Issues with rendering images in the browser due to CSS inline-block layout are causing

I have encountered an issue with two divs that are set to 50% width and displayed inline-block. Each div contains an image. I expected both divs to stay on the same line, but sometimes the browser breaks the layout. Here is the HTML code snippet: <div ...

htmlcsslayoutbrowserresponsive-design

Display a list of personalized post types and emphasize the item that is currently being viewed

I've created a unique type of post called 'product'. Every product page has a sidebar listing all products, with the current product displayed in bold text. For instance, when viewing product 3, it should appear like this: Sidebar Pr ...

phpcsswordpress

Managing layout positioning in Bootstrap 4

I've been delving into MVC to expand my skills. Initially, everything was running smoothly with the scaffolding done by Visual Studio. However, after migrating to Bootstrap 4, I encountered a problem where all my controls were jumbled up in the view. ...

asp.net-mvcbootstrap-4

Ways to prevent a floated element from impacting text-align: center styling?

Within my code, there is a <p> element structured as follows: <div><p>Text Goes Here <span></span</p></div> The CSS I currently have is: div { text-align:center } span { float:right } An issue arises when I populate ...

htmlcss

The time discrepancy in Django caused by importing data from MySQL with mismatched timezones

Currently, I am utilizing Django 3 with Bootstrap 4 and MySQL 5.7 on a Laragon server running Windows 10. In my Django settings: TIME_ZONE = 'Europe/Paris' In my MySQL settings: TIME_ZONE = SYSTEM (My system is set to 'Europe/Paris') ...

mysqldjangobootstrap-4timezonedjango-timezone

Maximizing efficiency in website reloading and development with Sinatra using Ruby along with Rack and Haml

In my efforts to build a Sinatra website, I have gone from using Shotgun to now utilizing Rerun for reloading my Thin server whenever I make file edits. However, the development cycle is proving to be quite time-consuming. Even small changes to CSS, JavaS ...

cssrubysinatrahaml

What makes the transparent border colors on <tr> appear too dark?

For instance, take a look at this code: http://jsfiddle.net/WaJy7/ In my attempt to apply a semi-transparent border to every <tr> element, I've encountered an issue where the color of the border appears darker than intended for all rows except ...

htmlcss

Ensuring the footer stays at the bottom of the page using Tailwindcss and ReactJS

I've read numerous articles and posts about achieving this, but none of the methods seem to be effective for me. My goal is to have the footer stick to the bottom of the page when viewed on mobile devices. It displays correctly on larger screens, but ...

cssreactjstailwind-css

The submenu dropdown on the navigation bar appears once you hover over the parent bootstrap element

Hey there! I'm currently facing an issue where the submenu dropdown is displaying when its grandparent is hovered, rather than just its parent. Here's the code snippet: <nav class="navbar navbar-default"> <div class="container"> ...

jqueryhtmlcsstwitter-bootstrapnavbar

Send properties to the makeStyles function and apply them in the CSS shorthand property of Material UI

When working with a button component, I pass props to customize its appearance: const StoreButton = ({ storeColor }) => { const borderBottom = `solid 3px ${storeColor}`; const classes = useStyles({ borderBottom }); return ( <Button varian ...

javascriptcssreactjsmaterial-uijss

The appearance of Google Font CSS may vary when retrieved using WGET

Uncovering an issue while attempting to dynamically fetch a Google Fonts css file to extract the font URL. The scenario looks like this: (Viewed in Chrome) Contrast that with: WGET -qO- http://fonts.googleapis.com/css?family=Droid+Sans Upon inspecti ...

csswgetgoogle-webfonts