The upper border is missing from the middle div in the presence of three divs

I am currently working on a new project using HTML, CSS, and Bootstrap. However, I have encountered a problem. I have created a box with a border all around it, and when I hover over this box, an image appears inside of it. By default, the inside of the box is set to white. When I copy and paste the code for this box underneath the first box and repeat the process, I end up with 3 divs which is exactly what I want. The issue I am facing is that the top border of my middle box is not showing. Can anyone help me with this?

Below is the code for one of my boxes:

<div>
   <a class="text-decoration-none" href="">
      <div class="po-relative mb-2">
         <img src="images/lukas-blazek-GnvurwJsKaY-unsplash.jpg" alt="" class="img-fluid">
         <div class="po-absolute">
         </div>
      </div>
   </a>
</div>

Here is the CSS related to these boxes:

.po-relative {
    position: relative;
    border: .5px solid #cecece;
}

.po-absolute {
    background-color: white;
    height: 176px;
    width: 266px;
    position: absolute;
    bottom: 0;
    transition: 250ms ease-in-out;
}

.po-absolute:hover {
    background-color: black;
    opacity: 20%;
}

I have also provided an image showcasing the problem https://i.sstatic.net/qwDGM.png

htmlcssbootstrap-5

Answer №1

This situation arises because the width and height are set in a box with absolute positioning, which does not affect the dimensions of the parent element, causing it to be cropped.

To address this issue, I have relocated the width and height properties to the element with relative positioning, and specified the left, top, and bottom properties for the absolute positioned element.

Here is the modified code snippet:

.po-relative {
    position: relative;
    border: .5px solid #cecece;
    height: 176px;
    width: 266px;
    margin: 10px auto;
}

.po-absolute {
    background-color: white;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    transition: 250ms ease-in-out;
}

.po-absolute:hover {
    background-color: black;
    opacity: 20%;
}
<div>
   <a class="text-decoration-none" href="">
      <div class="po-relative mb-2">
         <img src="images/lukas-blazek-GnvurwJsKaY-unsplash.jpg" alt=""class="img-fluid">
         <div class="po-absolute">
         </div>
      </div>
   </a>
</div>
<div>
   <a class="text-decoration-none" href="">
      <div class="po-relative mb-2">
         <img src="images/lukas-blazek-GnvurwJsKaY-unsplash.jpg" alt=""class="img-fluid">
         <div class="po-absolute">
         </div>
      </div>
   </a>
</div>
<div>
   <a class="text-decoration-none" href="">
      <div class="po-relative mb-2">
         <img src="images/lukas-blazek-GnvurwJsKaY-unsplash.jpg" alt=""class="img-fluid">
         <div class="po-absolute">
         </div>
      </div>
   </a>
</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

Ways to access the content of the chosen <td> element using Vue?

I have a dynamic table where I retrieve data using $.ajax() from a database. The content in the rows is editable, and I need to save the changes made with vue.js. After updating the content, an $.ajax() function with 4 parameters (name, client_id, url, and ...

javascriptjqueryhtmlvue.js

Is there a way to send an array with data to a different component using react-redux within a Higher Order Component (H

It seems like I'm missing something because I can't seem to find any examples of how to pass an array with data from a Higher Order Component (HOC) to another component. Here is the code snippet: import React from 'react' import NoAc ...

javascripthtmlreactjs

Nesting maps in JavaScript is a powerful way to transform

I'm in the process of developing a budgeting app using React and JavaScript. At the moment, I have successfully generated a table displaying various costs. Name Budget Used $ Used % Available Food 300 300 100 0 Streaming services 600 600 100 ...

javascripthtmlreactjsarray.prototype.map

The z-index of two elements seems to be behaving differently than anticipated

I am encountering an issue with the code provided below, which is a simplified version of a larger problem. Can you explain why, if: .div_A {z-index: 10;} < .div_C {z-index: 20;} the button inside div_C appears behind div_A? I need to understand the ...

htmlcss

Extract the value of an HTML tag and store it in a PHP variable

I have successfully implemented JavaScript code to dynamically update the value of an input tag in my popup. However, when I try to echo out this updated value using a PHP variable within the same popup, it doesn't seem to work as expected. Despite un ...

javascriptphpjqueryhtml

Angular 2's subscribe method allows for actions to be taken in response to

There are two buttons, one of which is hidden and of type file. When the user clicks the first button, a confirmation dialog opens. Upon clicking "Ok" in the dialog, the second button should be clicked. The issue arises when all the logic in the subscribe ...

htmlangulartypescript

I am currently having issues with a PHP script I wrote for sending email, as it is

After creating a form and implementing a PHP script to send an email upon form submission, I encountered an issue where the "Thank you" message was displayed on a different HTML page, but the email wasn't sent to my account. I uploaded the files to t ...

phphtmlwampserver

"Looking to swap out the Angular theme's CSS stylesheet for your entire application? Here's

I was initially facing an issue while trying to import CSS through index.html as I kept getting a MIME type error: enter image description here The browser refused to apply the stylesheet from 'http://localhost:4200/css/pink-bluegrey.css' because ...

cssangulartheming

Pixelated Arial font display issue on WordPress

After learning about how Chrome renders fonts and the differences among other browsers, I encountered an interesting scenario. I have two files: one is a WordPress page where the font in the header appears pixelated, and the other is a static HTML page wit ...

cssfont-family

Adjusting the height of a container dynamically in React while flex items wrap using CSS

In my React project, I have a container called "answers-container" with multiple buttons inside it, laid out using flexbox with flex-wrap: wrap to allow them to wrap onto the next line when the container width is exceeded. However, I'm facing an issu ...

javascripthtmlcssreactjs

Implementing the disabled style for an ASP.net dropdownlist

Imagine I have an ASP.net dropdownlist set up like this: <asp:DropDownList ID="ddOwnershipDocumentType" class="msbdd" runat="server"> </asp:DropDownList> Let's take a look at the style definition for msdbdd: .msbdd { font-family: WM ...

cssasp.netwebforms

Modification of encapsulated class in Angular is not permitted

Within Angular, a div element with the class "container" is automatically created and inserted into my component's HTML. Is there a way to modify this class to "container-fluid"? I understand that Angular utilizes encapsulation, but I am unsure of how ...

cssangular

The background color in the HTML file remains unchanged

Hello everyone, this is my debut post here. I can't seem to figure out why the background color isn't changing for me. Even though I have applied the bg color property, it's not taking effect as expected. <body bgcolor="#f0ffff"> T ...

htmlcsscolorsbackground

Instructions for submitting a form using Xcode

How can I automate the submission of a form in a webview? Here is my code: #import <Cocoa/Cocoa.h> #import <WebKit/WebKit.h> #import <WebKit/WebResourceLoadDelegate.h> @interface AppDelegate : NSObject <NSApplicationDelegate> @pro ...

htmlxcodeformswebview

How to Customize the Size and Color of secureTextEntry Inputs in React Native

When it comes to styling a password input like the one below: <TextInput name="Password" type="password" mode="outline" secureTextEntry={true} style={styles.inputStyle} autoCapitalize="none" autoFocus={true} /> I also ap ...

javascriptreactjscssreact-nativereact-native-textinput

Learn the process of including an active class using jQuery from an external active.js file!

This JavaScript code snippet $(function() { $("#navbar-nav li").click(function($) { // remove classes from all $("li").removeClass("active"); // add class t ...

phphtmljquerybootstrap-4

Center the text within a span element in an inline-block container

I'm currently working on a website design that features a flat aesthetic. I have a header at the top and two blocks of different colors placed side by side underneath it. Initially, I attempted to use float left and right for positioning but was recom ...

htmlalignmentvertical-alignmentcss

Challenges with TinyMCE and Drag Interaction

Here's the issue I'm facing with my page. The problem arises when using draggabilly to move the line. Dragging it to the left works fine, but dragging it to the right doesn't function properly in the area where the tinymce compiler is locat ...

htmlcsstinymcetinymce-4

What could be causing my popup window to not display on top of all other HTML elements?

.box { width: 40%; margin: 0 auto; padding: 35px; border-radius: 20px/50px; background-clip: padding-box; text-align: center; display: inline-block; } .button { font-size: 1em; padding: 10px; color: #222; border: 2px solid #06D85F; ...

htmlcss

Building a row of five dynamic columns using Bootstrap's responsive design

I'm looking to set up a row with 5 responsive columns that have equal padding on all sides, but I'm struggling to find the best way to do this using Bootstrap. Here's my current HTML: <div class="row five-col-row"> < ...

htmlcsstwitter-bootstrapbootstrap-4sass