Achieve overlapping divs using the Grid Layout

My objective is to have the div overlap the next row(s) without pushing them down when it increases in size.
I attempted to use position: absolute; but this caused issues with the Grid Layout structure.
Preserving the shape of the grid is crucial to me and I want to ensure it remains intact.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.grid-item:hover {
  background-color: #ffcccc;
  height: 90px;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

Answer №1

Consider adjusting the height on hover in your example. An alternative approach is to incorporate a negative bottom margin and utilize z-index to ensure it is displayed on top.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.grid-item:hover {
  background-color: #ffcccc;
  height: 90px;
  margin-bottom: -60px;
  z-index: 100;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

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

Guide on implementing two submission options in an HTML form using JavaScript

Currently, I am working on a form that includes two buttons for saving inputted data to different locations. However, I am facing an issue with the functionality of the form when it comes to submitting the data. Since only one submit function can be activa ...

What is the best way to structure a JSON data string for transmission from a WebView to JavaScript?

Seeking a solution for passing multiple values from an Android WebView to JavaScript. The challenge is that the string received in JS appears completely raw with control characters. The specific issue arises when sending the following string from Java: f ...

Selecting HTML5 data attributes using jQuery

There is a button on my page with multiple data attributes, and I am trying to hide it by selecting it based on its class and two specific data attributes. <a href='#' class='wishlist-icon' data-wish-name='product' data-wi ...

What is the reason behind the controller being unable to locate an Angular model when it contains dots in its name?

I am completely new to Angular and struggling to comprehend this code snippet. app.controller('FileConfigController-detail', function($scope, $http, $stateParams, FileConfigDetailsService) { $scope.detail.inptITResourceID = "test me" ...

Trying to showcase information received from a server using an API

For a school project, I am developing a website that can retrieve weather data (currently just temperature) based on a city or zip code from openweathermap.org using an asynchronous call. I have successfully retrieved the data from the API, but I am strug ...

Linking numerous promises generated by a for loop

After delving into the concept of promises through this resource, I grasped the fundamental idea behind it. var parentID; $http.get('/api/user/name') .then(function(response) { parentID = response.data['ID']; for (var i = 0; i ...

Iframe not functioning properly on Internet Explorer versions 8-11 when using WordPress

I'm having trouble getting my WordPress video to display when using an iframe. When I try to view it in Internet Explorer, the video automatically loads in Windows Media Player instead of playing through the iframe. The video files are local mp4s and ...

The wp_mail function is exclusively designed to send plain text

I have encountered an issue while using the wp_mail() function to send HTML formatted emails. Despite setting the headers to indicate "Content-Type: text/html; charset=UTF-8", all the emails appear as plain text without any formatting. While testing on Wi ...

How can I display only a horizontal scrollbar on the body content while avoiding an excessively long image header?

Currently, I have a 4000px width image as the header of my website. To hide the horizontal browser scrollbar, I am using the following CSS: html { overflow-x: hidden; } However, this method results in the horizontal scrollbar never appearing. I ac ...

Unable to modify the hover color on the image or icon

After creating a circle icon with an image in the center, I wanted to make the image change colors on hover. The main focus of the icon is the circle itself. In my attempt to achieve this effect, I included the following code for the circle icon: .circle- ...

The backend function of an aspx page is failing to execute when triggered by a $.ajax request

Currently, I am facing an issue with a web form IndexPage.aspx. The script in this front-end code makes an ajax call to a code-behind function. Take a look at the code snippet below: $.ajax({ type: "POST", url: &apos ...

NGRX Store: Unable to modify the immutable property '18' of the object '[object Array]'

While attempting to set up an ngrx store, I encountered 7 errors. Error Messages: TypeError: Cannot assign to read only property '18' of object '[object Array]' | TypeError: Cannot assign to read only property 'incompleteFirstPass ...

Mastering the Art of Utilizing $(this) in jQuery

$(".item_listing").hover(function(){ $(".overlay_items").display(); },function(){ $(".overlay_items").hide(); } ); This is my jQuery code. I am trying to display the "overlay_items" div when the "item_listing" div is hovered ov ...

Element width shrinks inside container query

Can you explain why using container-type: inline-size renders the span normally but collapses the button? <span style="container-type: inline-size; outline: 1px solid blue;"> This is a span </span> <button style="container-type: inli ...

Angular service unable to maintain data continuity across multiple controllers

I am facing an issue while attempting to set the title in controller1 using a service and then accessing the updated title in controller2. The function sharedProperties.setTitle(title) works perfectly fine in controller1, however, in controller2, I keep g ...

Tips for displaying the overlay in a jQuery UI modal dialog

The demonstration shows that the overlay is displayed correctly and all elements below it are disabled: <div class="ui-widget-overlay" style="width: 1920px; height: 650px; z-index: 1001;"></div> However, on my webpage, I am still able to inte ...

Rendering an Image File from Database Using React JS and Node JS

I am encountering a problem with displaying an image file from my mongodb database on my Profile and EditProfile component. The issue arises when I upload the file using the Editprofile component - it saves to the database successfully. However, when I try ...

Having trouble exporting a static HTML file using Next.js

https://i.stack.imgur.com/xQj7q.pngI'm a beginner in the world of React. Recently, I completed a project where I utilized "next build && next export" in my package.json file for static HTML export. By running the npm run build command, an out folder w ...

Issue with Bootstrap modal not displaying in the center as expected

screenshot of the page Hey there, I'm struggling to understand why this modal is displaying incorrectly. I copied the code from the bootstrap website. Here it is: <button type="button" class="btn btn-info btn-lg" (click)="showPerformedActivityMod ...

Collapse the accordion when the search query is less than or equal to 0

I'm having trouble making the accordion open both when the user has typed something into the search bar and when someone clicks to open it. I can get them to work individually, but not together. If I use this code: <accordion-group is-open="statu ...