Is there a way to prevent wrapping in a column, causing the last column to partially extend outside the container when the first column is hovered over?

Is there a way to prevent wrapping of a column so that when I hover over the first column, the last column displays half out of the container?

I attempted to achieve this by setting the 25% to flex: 0 0 50%; in my column when hovering on the box-hover class. While this works fine, the last column still wraps.

My goal is for the last column to display partially outside the container when hovering over the box-hover, showing half of it and hiding the other half.

I have included an image depicting what I am aiming for. Thank you in advance.

I desire:

https://i.sstatic.net/hazJi.jpg

Here is my code snippet:

.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container">
    <div class="row">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
   </div>
 </div>
</section>

htmlcssflexboxbootstrap-4

Answer №1

Utilize flex-nowrap for row and reduce the width of sibling divs on hover, while also adding overflow:hidden to the parent.

.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.container.overhidden{
  overflow:hidden;
  padding:0px 55px;
  max-width:1280px;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container overhidden">
    <div class="row flex-nowrap">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
   </div>
 </div>
</section>

Answer №2

When using the default "row" class in flexbox, your boxes will wrap to the next line. To prevent this, simply add the "flex-nowrap" class along with the row class. This will keep your boxes on the same line. I hope this solution helps!

.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container">
    <div class="row flex-md-nowrap">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
   </div>
 </div>
</section>

Answer №3

To enhance the appearance of your last column when hovered over, you may want to consider using negative margin and hiding the overflow:

.container {
  overflow:hidden;
}
 
.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }
 /*addedd*/
 .col-md-3:last-child  {
  transition: margin 0s 0.5s; /*remove margin when the hover ends*/
}
 .box-hover:hover ~.col-md-3:last-child {
   margin-right:-30%;
  transition: margin 0s; /*add margin immediately on hover*/
 }
 /**/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container">
    <div class="row">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
   </div>
 </div>
</section>

Alternatively, you could also explore the option of incorporating negative margin internally and reducing the width of the element to conceal half of it:

.main-wraper {
  padding: 150px 0;
  background-color: #7070702b;
}
.box {
  height: 345px;
  background-color: #36495E;
  margin-bottom: 30px;
  margin-right:0;
}
span {
  position: absolute;
  bottom: 0;
  height: 90px;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #5195CE;
 }
 .box-hover {
  transition: ease-in-out 0.5s;
}
.box-hover:hover {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
 .box-hover span {
  background-color: #89c440;
 }
 /*addedd*/
 .col-md-3:last-child,
 .col-md-3:last-child .box{
  transition: 0s 0.5s;
}
 .box-hover:hover ~.col-md-3:last-child {
   margin-right:-30%;
   flex-basis:12.5%!important;
   overflow:hidden;
  transition: 0s; 
 }
 .box-hover:hover ~.col-md-3:last-child .box {
   margin-right:-100%;
   transition: 0s;
 }
 /**/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main-wraper">
  <div class="container">
    <div class="row">
      <div class="col-md-3 box-hover">
        <div class="box position-relative">
          <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </div>
     <div class="col-md-3">
       <div class="box position-relative">
         <span class="d-flex flex-column justify-content-center">Lorem Ipsum is simply dummy</span>
       </div>
     </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

What is the best way to include a CSS stylesheet in a Wordpress theme?

Is there a way for me to properly load my custom CSS in Wordpress so that the dynamically inputted content on my pages matches the styling of my header and footer? In my functions.php file, I currently have the following code, but it only prints the code ...

csswordpressthemes

Issues detected with Foundation Block Grid in small size setting

I created a React component to display a series of div elements on a page using the Foundation Block Grid system to control the number of divs per row. However, I am facing an issue where the number of divs does not change when switching to a small-sized s ...

cssreactjszurb-foundation

Utilize Pseudo Elements for Designing a Unique Background Overlay

I am aiming to create a div with a customizable background, and then utilize a pseudo element to generate a semi-transparent white overlay that will lighten the background of the div. The crucial requirement is for the "overlay" to appear beneath the conte ...

htmlcsspseudo-element

Is there a WebKit equivalent to the MDC (Mozilla Documentation Center)?

Experimenting with the newest HTML5 features is rewarding, yet challenging as standards and browser-specific implementations constantly evolve. While Mozilla provides a valuable resource with their MDN Doc Center documenting Gecko changes, I'm curious ...

htmldocumentationwebkit

Is it possible to incorporate a Node.js library into an HTML document?

I am working on an HTML file where I want to incorporate the nodemailer library to handle email sending. Although in nodejs, I can easily include var nodemailer = require('nodemailer') at the beginning of the script section of my HTML file, it ap ...

javascripthtmlnode.js

Issues with displaying HTML video content

Seeking assistance with a unique coding predicament. I've got an HTML file that showcases a JavaScript-powered clock, but now I'm looking to enhance it by incorporating a looped video beneath the time display. Oddly enough, when the clock feature ...

javascriptcsshtmlhtml5-video

Adjust remaining vertical space

Trying to design a TailwindCss layout that resembles the following: +----------------------+ | | +-----+----------------+ | | | | | | | | | | | | +-----+------ ...

cssflexboxtailwind-css

Trigger fixed element to appear/disappear when scrolling using JavaScript

I've tried multiple solutions, but I can't seem to get this functionality to work properly on my website. I'm attempting to create a "schedule a demo" button similar to the one on www.bamboohr.com Currently, I have the following html, css, ...

javascriptjquerycssshow-hide

Converting counterup2 to pure vanilla JavaScript: step-by-step guide

Is there a way to convert the counterUp2 jQuery code to vanilla JavaScript? const counters = document.querySelectorAll('.counter'); function count(element) { let currentValue = 0; const targetValue = parseInt(element.innerText); let interv ...

javascripthtml

Adjust the width of individual columns in Bootstrap 4 responsive tables to ensure they have specific widths

I am currently working on setting up a table where specific columns require a fixed width and do not adjust automatically. Despite attempting a method to achieve this, I have encountered issues as the width still adjusts based on the length of the text. ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Are there any reliable PHP classes available to generate HTML tables efficiently?

Searching for an advanced PHP class that can effortlessly create intricate HTML tables, including the ability to handle colspan/rowspan and assign specific CSS classes to rows, columns, and cells. ...

phphtmlhtml-table

Variations between <div/> and <div></div>

When using Ajax to load two divs, I discovered an interesting difference in the way they are written. If I write them like this: <div id="informCandidacyId"/> <div id="idDivFiles"/> Although both divs are being loaded, only one view is added ...

javascriptjqueryhtml

Guide to defining a conditional statement in a Nuxt.js application

I am working on displaying data from the Wordpress API in a Nuxt.js project. I am trying to organize the data by category, for example where ('post.category ', '=', 'categoryName '). Can anyone help me with the syntax in Vue.j ...

javascripthtmlvue.jsnuxt.js

Unable to interact with web element

When using selenium, I have a web element that I want to select. The WebElement.IsDisplayed() method returns true, but I am unable to perform the webelement.click() operation. port_dimension = canvas.find( By.xpath( "//*[local-name() = 'rect'][ ...

javacssseleniumselenium-webdriver

Potential Performance Issue with Material UI's withStyles Function

I've been given the task of optimizing the loading speed of a page in our react redux web app. When the page load action is triggered, there seems to be a slight freeze lasting about half a second. After checking the profiler, everything seems fine ...

cssreactjsperformancematerial-uicss-in-js

Utilizing Next.js - Implementation of a unique useThemeMode hook to efficiently manage theme preferences stored in the browser's localStorage, seamlessly integrating with toggleTheme

For a while now, I've been trying to figure out how to toggle my favicon based on the theme logic of my application and the current theme state stored in localStorage. My approach involves using CSS variables and data attributes applied to the html bo ...

javascriptcssreact-hooksnext.jsstyled-components

Customizing the appearance of an HTML element using user-input text styling

On my webpage, there are two text areas and a division. One of the text areas is meant for users to input HTML code, while the other is for CSS code. Whenever a button is clicked, a JavaScript function will be triggered to display the combined HTML and CSS ...

javascripthtmlcss

Adjust the size of a div while maintaining its aspect ratio based on the width and height of its parent element using CSS

After exploring various methods to create div aspect ratios using CSS, I had success with a demo. However, I encountered an issue with setting the height of my container when the width-to-height ratio is larger (#1 scenario). I was able to achieve the #2 ...

css

Is it possible to conceal the text specifically inside a textarea, rather than just hiding the entire textarea itself?

Is it possible to have a button next to the textarea that allows you to hide and unhide the text inside the textarea by clicking on it? ...

javascripthtmlcss

Tips for displaying a background image without obstructing the container class on your website

How can I set a background image for my website? Whenever I use the code background-image:url('path_to_image');, it ends up covering my container class. Is there a way to place the image behind the container class? ...

htmlcssbackground-image