Concealing excess content in a vertical container with margins

I'm currently working on setting up a grid of thumbnails for my blog posts using Bootstrap 4.

The columns have a size of col-md-6. Within each column, there is an anchor with a background image and a gradient overlay that transitions from black to transparent.

Everything seems to be functioning correctly, but the issue arises when the gradient overlay extends beyond the width of the container, as shown in the image below.

https://i.sstatic.net/IZghE.png Code Snippet:

<div class="container homeSection">
  <div class="row">
    <div class="col-md-6 dualBlogCallout">
      <a href="#">
        <div class="img-holder border-radius-15">
          <div class="dualGradient"></div>
          <img src="assets/img/beachPlaceholder.png" class="img-fluid w-100" alt="Blog Alt"/>
        </div>
      </a>
    </div>
    <div class="col-md-6 dualBlogCallout">
      <a href="#">
        <div class="img-holder border-radius-15">
          <div class="dualGradient"></div>
          <img src="assets/img/beachPlaceholder.png" class="img-fluid w-100" alt="Blog Alt"/>
        </div>
      </a>
    </div>
  </div>
</div>

CSS Styles:

.dualBlogCallout{
  color: white;
  position: relative;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 5;
}
.dualBlogCallout a{
  overflow: hidden;
}
.dualGradient{
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 1;
  width: 100%;
  height: 300px;
  pointer-events: none;
  z-index: 1;
}

Desired Outcome:

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

I'm looking for guidance on how to contain the absolutely positioned gradient within the anchor element without any overflow issues, while avoiding the use of the Bootstrap 4 no-gutter class. Can anyone help me achieve this?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To solve this problem, you can include the following rule in your CSS file:

.img-holder { position: relative; }

The reason why you are encountering issues is because the class .dualGradient is positioned absolutely, but the closest parent element with a defined position is .dualBlogCallout.

By default, any element with the CSS property position: absolute will look for the nearest ancestor that has a specified position.

Answer №2

Make sure to include "position: relative;" in your CSS for the "img-holder" class. Here is a sample code snippet showcasing the solution.</p>

<p>Note: I have also added the border-radius class which was missing from the original post</p>

<div>
<div>
<pre class="snippet-code-css lang-css"><code>.img-holder {
  position: relative;
}
.dualBlogCallout{
  color: white;
  position: relative;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 5;
}
.dualBlogCallout a{
  overflow: hidden;
}
.dualGradient{
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 1;
  width: 100%;
  height: 300px;
  pointer-events: none;
  z-index: 1;
}

.border-radius-15 {
  border-radius: 15px;
  overflow: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container homeSection">
  <br><br>
  <div class="row">
    <div class="col-md-6 dualBlogCallout">
      <a href="#">
        <div class="img-holder border-radius-15">
          <div class="dualGradient"></div>
          <img src="https://via.placeholder.com/200x100" class="img-fluid w-100" alt="Blog Alt"/>
        </div>
      </a>
    </div>
    <div class="col-md-6 dualBlogCallout">
      <a href="#">
        <div class="img-holder border-radius-15">
          <div class="dualGradient"></div>
          <img src="https://via.placeholder.com/200x100" class="img-fluid w-100" alt="Blog Alt"/>
        </div>
      </a>
    </div>
  </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

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my

I am currently learning angular. I've generated a csv file for uploading using the code above, but when I try to display it, the screen remains blank with no content shown. The page is empty and nothing is displaying Could it be that it's not ...

javascripthtmlcssangular

How can I replicate the functionality of the span element using Javascript?

Using Javascript, I am able to display a paragraph without the need for HTML. By adding it to an HTML id, I can manipulate individual words within the text. My goal is to make specific words cursive while keeping the entire paragraph in its original font s ...

javascripthtml

Send a POST form from my website to another website and retrieve the data from the remote server

My website, example.com, includes a web HTML form that leads to another site where the results are currently displayed. I want to retrieve these results from the other website using PHP or some other method and showcase them on my own site. However, the fo ...

javascriptphpjqueryhtmlcss

JavaScript toggle display function not functioning properly when clicked

I've been attempting to create a drop-down list using HTML and JavaScript, but for some inexplicable reason, it's just not functioning as expected despite scouring through countless tutorials on YouTube. Below is the snippet of code that I'm ...

javascripthtml

Clicking on a button in HTML to open a JavaScript file

As a beginner in HTML and JavaScript, I am looking for a way to open a JavaScript file when the onclick event of a button in my HTML file is triggered. Can anyone provide me with guidance on how to achieve this? Thank you in advance. ...

javascripthtmlonclickbuttonclick

Experiencing issues with creating HTML using JavaScript?

I'm a JavaScript novice and struggling to figure out what's wrong with my code. Here is the snippet: var postCount = 0; function generatePost(title, time, text) { var div = document.createElement("div"); div.className = "content"; d ...

javascripthtmlcss

Place information from an input field into a specific row within a table

Utilizing Angular 4, I am developing a frontend application for a specific project. The interface features a table with three rows that need to be filled with data from an external source. https://i.stack.imgur.com/Dg576.png Upon clicking the "aggiungi p ...

htmlcssangulartypescript

What is the reason behind my resizer bar not changing color to green?

Whenever I resize the bar between the West and Inner Center areas, it turns green. However, the bar between the Inner Center and Inner South areas does not change color. How can I make it turn green when resizing, including adding the orange highlight for ...

javascriptjquerycssjquery-ui

Utilize JavaScript to target the specific CSS class

Hello, I am currently using inline JS in my Wordpress navigation menu, redirecting users to a login page when clicked. However, I have been advised to use a regular menu item with a specific class and then target that class with JS instead. Despite searchi ...

javascriptcsswordpress

Effortlessly adjust item width in CSS Grid

I am currently utilizing CSS Grid to showcase various tags. If a tag happens to be quite large, with a width exceeding 150px, I would ideally like that specific item to expand across multiple columns as necessary. For instance, in the visual representation ...

cssreactjscss-grid

Firefox Misplacement: Erroneously Shifting Element Locations

I have recently completed designing and developing a new website, which you can visit here. However, I am currently facing an issue with the positioning of the "About Us" image when accessing the site on either a tablet or a mobile device. Strangely enou ...

htmlcssfirefoxtwitter-bootstrap-3

What is the process of retrieving user input from an HTML form and locating specific data within it?

Here is the structure of my form: <div id="employeeinfo" style="padding:40px" class="employee-body"> <form id="employeeform" title="" method="post"> <label class="title">First Name</label> < ...

htmljsonajax

Is there an h1 heading on this page?

Trying to enhance the accessibility of a website by properly setting up the headers. Running into issues with ensuring they are in the correct order. If there is code that could be applied across all pages to set h1 if it doesn't exist (promoting h2, ...

javascripthtml

javascript code producing incorrect HTML

I created a script to populate a selectbox with various options. Initially, the data is in the form of a string like this: "key=value;key2=value2;etc...": //splitting the string to separate different options for the selectbox var values = data.split(&apo ...

javascriptjqueryhtml

What is the best way to update the div id by extracting the last digits from a number?

Is there a way to change the div ids using a function? Before: <div id="a_1">a1</div> <div id="b_1">b1</div> <div id="c_1">c1</div> <div id="d_1">d1</div> <button onclick="change()">Change</button& ...

javascriptjqueryhtml

Encountered a problem while attempting to create two separate div elements. The template root is designed to have only one element. This issue

<template> <div class="footerpart-container"> <div class="general-container"> dadada </div> <div class="legal-container"> dadad </div> <div class="helpsupport-container"> dada ...

htmlcssvue.js

The event.target.x attribute on the <i /> tag element

In my code, there is an <i name="documentId" onClick={this.openDocument}/> element with the onClick method defined as follows: openDocument(event) { const { name } = event.target; console.log('name', name); console.log('target&a ...

javascripthtmlreactjs

I possess a table that showcases MatIcon buttons. Upon clicking on a button, two additional buttons should appear at the bottom of the table

I am working on a table that contains mat-icon-buttons. When the button is clicked, it should display 2 additional buttons at the end of the table. Upon clicking the first button, its color changes from primary to red, and I would like to add two more butt ...

htmlangulartypescriptangular6

Using CSS to customize the dropdown text styling of a select box within a custom wrapper

I have a specific customized dropdown menu using the styled-select wrapper: HTML: <div class="styled-select"> <select name="example_length" aria-controls="example" class=""> <option value="10">10</option> <option value="25"> ...

htmlcssdrop-down-menu

Is there a way for me to choose every element excluding those contained within a specific div?

Check out my code snippet: <div class="car"> <div class="make">NISSAN</div> <div class="model">MICRA</div> </div> <div class="discontinued"> <div class="car"> <div class="make">FOR ...

htmlcsscss-selectors