"Struggling to make the 'overflow: hidden' property work for an absolutely positioned

I'm struggling to conceal an absolutely positioned image within a CSS grid layout. Below is the code snippet:

HTML:

<div class="relative-parent">
  <div v-for="item in 12" class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

In this structure, relative-parent acts as the CSS grid container with multiple hiding-parent elements.

CSS:

.relative-parent {
  position: relative;
  width: 500px;
  height: 500px;
  display: grid;
  place-items: center;
  grid-gap: 5px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(3, 100px);
}
.hiding-parent {
  overflow: hidden;
  width: 100px;
  height: 100px;
}

.child {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}

The challenge lies in making each child element span the entire width of its relative-parent. These child elements are essentially parts of one image split into 12 sections through absolute positioning and overflow: hidden on the hiding-parents.

Applying position: relative to the hiding-parent resolves the hiding issue but results in each image inheriting the parent's width, which is not desired. Positioning the parents as absolute or fixed would disrupt the grid layout.

I'm at a loss here and would greatly appreciate any guidance. Thank you!

Answer №1

Resource Link: Click here for the code

    <div className="relative-parent">
      <div className="child item1">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item2">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item3">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item4">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item5">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item6">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item7">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item8">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item9">
        <img src="https://source.unsplash.com/random" />
      </div>
    </div>

CSS Styles:

.relative-parent {
  display: grid;
  grid-gap: 5px;
  grid-template-areas:
    "one two three "
    "four five six "
    "seven eight nine";
}
.item1 {
  grid-area: one;
}
.item2 {
  grid-area: two;
}
.item3 {
  grid-area: three;
}
.item4 {
  grid-area: four;
}
.item5 {
  grid-area: five;
}
.item6 {
  grid-area: six;
}
.item7 {
  grid-area: seven;
}
.item8 {
  grid-area: eight;
}
.item9 {
  grid-area: nine;
}
.child {
  height: 200px;
  background: red;
}
.child img {
  width: 100%;
  height: 100%;
}

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

Simultaneous AJAX, animated page loader

My website takes 3 seconds to load due to multiple Synchronous AJAX requests. To enhance user experience, I would like to implement a loading page with an animated GIF. Once the Ajax requests are completed and the page is fully loaded, the loading page sh ...

In Bootstrap 4, the Form-Inline module experiences alignment issues on extra small (XS) view

Boostrap 4 has been used to create a .form-inline at the bottom of the page. It appears correctly when the viewport is larger than the XS breakpoint... https://i.sstatic.net/UYaG7.png ...but encounters issues when switching to XS view... https://i.sstat ...

Aligning an SVG icon at the center of a button

I have elements that are currently being used as buttons, but I want to switch them out for actual button tags. This would improve accessibility and allow keyboard navigation using the tab key to focus on my buttons. Each button contains a centered SVG ima ...

Changing the ID of a textbox can be done by modifying the corresponding

I need to dynamically generate textboxes, checkboxes, and buttons based on user input during runtime. Users should be able to delete a specific textbox, checkbox, and button by clicking a button. The creation process is working correctly. However, when ...

Arranging Content with Bootstrap Columns

I am trying to organize my content into three sections as follows: A - main content of page B - very important content (must be visible without scrolling) C - less important content. The current layout I have is like this: ----- |A|B| |A|C| ----- Howe ...

Extracting JSON Data into Text Boxes within jQuery UI Dialogs

Let me provide some context to my current issue. Due to the nature of the problem being work-related, I am unable to share much of the code. The task at hand involves working with a jQuery dialog. Essentially, I have a list of names displayed with a boots ...

Can you identify the issue within this code that combines HTML5, CSS, and JavaScript?

I'm attempting to create a feature where, upon clicking a button, a hidden div will be revealed. However, my current implementation doesn't seem to be working. function reload(){ window.reload(); } function vis(x,z,a){ var xpar = docu ...

Is there a way to prevent on-click errors in ReactJS that someone can share with me?

The onclick listener was expected to be a function, but instead received a value of string type. getListener@http://localhost:3000/static/js/bundle.js:18256:15 accumulateSinglePhaseListeners@http://localhost:3000/static/js/bundle.js:22846:39 <button on ...

Creating dynamic divs on button click for my project is something that I must do, and I will

When the user clicks on the Add button, a new div should be added as shown in the image above. Implementing this functionality using Bootstrap is crucial because the divs must rearrange correctly based on different resolutions such as 1920x900, 1280x600, ...

Tips for modifying the width of the mat-header-cell in Angular

Is there a way to customize the mat-header-cell in Angular? I've been trying to change its width without success. Any suggestions would be greatly appreciated. <ng-container cdkColumnDef="name"> <mat-header-cell *cdkHeaderCellDe ...

What steps do I need to take to design a menu?

I need assistance in organizing my menu with submenus. The code I currently have successfully retrieves all the submenus, but I would like to categorize them accordingly: For instance: Main Menu - Submenu 1, Submenu 2, Submenu 3 How can I go about categ ...

Could someone review my coding syntax in JavaScript for utilizing indexOf, split, and looping through multiple inputs to paste the splits?

As someone who is self-taught and codes part-time as a hobby, I am currently working on building a JavaScript/jQuery tool. This tool will allow users to copy rows or columns from Excel and paste them into an online HTML form consisting of a grid of <tex ...

Vue.js: establishing the default server-side application URL globally

As I develop a Vue application, I came across a scenario where I need to dynamically update the base URL used for making API calls. Currently, my code looks like this: this.axios.post('https://localhost:8000/api/auth/login',.......). After depl ...

Encountering a Vue-router error in the browser console following the execution of the command "npm update." The specific error message received states: "Module build failed: Error: ENOENT: no such file or

Previously, the project was functioning properly. However, after running the "npm update" command, an error appeared in the browser console: Error: Module build failed: Error: ENOENT: no such file or directory, open 'C:\xampp\htdocs& ...

What is causing the issue with $(document).append() method in jQuery version 1.9.1?

Why is the following code not functioning properly in jQuery 1.9.1? It worked fine in previous versions. $(function () { $(document).append(test); document.write('done'); }); var test = { version: "1.0", }; JSFiddle: http://jsfiddl ...

Having trouble with loading images in Bootstrap 5 framework

I am currently developing a website using HTML in Visual Studio Code with Bootstrap 5. However, I am facing an issue where the images I have inserted into a new section are not loading, while the ones in previous sections are displaying perfectly fine. < ...

Exploring the Power of Vue 3 in Manipulating the DOM

Hello everyone, I am a beginner with Vue and I am interested in learning how to modify the DOM without relying on methods such as document.querySelector or getElementById. Let's take for instance this input: <input id="myInputId" class=& ...

Issue with HTML While Utilizing wp_get_attachment_image

This script : $source = wp_get_attachment_image( get_the_ID(), 'medium' ); $weburl = wp_get_attachment_image_url( get_the_ID(), 'full' ); echo( '<p><a href="%s"><img src="%s"></a></p>', $weburl, ...

I can only use innerHTML once in my React application

I am attempting to clear my container div when the user clicks the search button in order to remove all existing search results. However, I am encountering an issue where using innerHTML to clear the container div only works the first time. If a second sea ...

The Vuetify application suddenly disappeared after updating to version 2.0

Currently, I am using vuetify version 1.5.16, but when I try to upgrade it to version 2.0 using npm, the application stops working. Below is a code snippet of a basic drawer content toolbar layout that fails to render after the upgrade. Despite checking t ...