My container is expanding on bigger displays with Bootstrap 4

When viewing my image overlay on a large screen, it appears stretched out. I have attempted using max-width to address this issue, but it compromises responsiveness on smaller screens.

I am currently working on adding a transition effect to the image so that the overlay will appear when hovering over it. However, the problem arises when the img-overlay stretches on larger screens.

.head-txt {
  font-size: 50px;
  color: black;
}

.resource-img-height {
  height: 400px;
  object-fit: cover;
}

.font-color {
  color: black;
}

.font-size-resourse {
  font-size: 20px;
}

.resourse-book-txt-width {
  width: 250px;
}

.img-overlay {
  position: absolute;
  /* max-width: 97%; */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 1;
  transition: 0.5s ease-in;
  background-color: rgba(0, 0, 0, 0.8);
}

.book-img-div:hover .img-overlay {
  opacity: 1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414607a627a66">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="col-lg-12 mt-1" style="background-color: white;">
  <div class="row">
    <div class="col-lg-3 img-div-pad-right img-div-pad-left book-img-div"><img src="https://via.placeholder.com/100" class="img-fluid resource-img-height" alt="">
      <div class="img-overlay vw-100"></div>
    </div>
    <div class="col-lg-3 my-auto">
      <h5 class="font-color mt-1">Book</h5>
      <h1 class="font-color mt-1">Product Leadership</h1>
      <p class="font-color mt-3 resourse-book-txt-width font-size-resourse">How Top Product Managers Launch Awesome Products and Build Successful Teams.</p>
    </div>
    <div class="col-lg-3 img-div-pad-right img-div-pad-left book-img-div"><img src="https://via.placeholder.com/100" class="img-fluid resource-img-height" alt="">
      <div class="img-overlay"></div>
    </div>
    <div class="col-lg-3 my-auto">
      <h5 class="font-color mt-1">Book</h5>
      <h1 class="font-color mt-1">Product Leadership</h1>
      <p class="font-color mt-3 resourse-book-txt-width font-size-resourse">How Top Product Managers Launch Awesome Products and Build Successful Teams.</p>
    </div>
  </div>
</div>

Answer №1

Include additional CSS image parameters as shown below.

It's okay to use overlay CSS parameters, just ensure opacity is set to 0.

We believe the order of the DIV placements may be incorrect, with the text needing to be within the DIV for stacking purposes (refer to the example below).

The class col-lg-3 might require modification after it has been placed inside all those elements.

We have utilized JS comments to improve visibility of the closing DIVs arrangement.

In the example provided below, only one set of (col-lg-3) DIVs is used with an image.

.resource-img-height {
  display: block;
  width: 100%;
  /*--height: auto;--*/
  height: 400px;
  object-fit: cover;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: 0.5s ease-in;
  background-color: rgba(0, 0, 0, 0.8);
}

<div class="col-lg-3 img-div-pad-right img-div-pad-left book-img-div">
  <img src="https://via.placeholder.com/100" class="img-fluid resource-img-height" alt="">
  <div class="img-overlay vw-100">
    <div class="col-lg-3 my-auto">
      <h5 class="font-color mt-1">Book</h5>
      <h1 class="font-color mt-1">Product Leadership</h1>
      <p class="font-color mt-3 resourse-book-txt-width font-size-resourse">How Top Product Managers Launch Awesome Products and Build Successful Teams.</p>
    </div><!--// End text-->
  </div><!--// End overlay-->
</div><!--// End column container and image-->

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

Incorporating jQuery functions in the Angular app's main component file, app

I've been working on an Angular application and recently added the jQuery package with the following code: $ npm install jquery --save Now, I am attempting to transfer data from my HTML web page's .js file to the app.component.ts in Angular. I ...

The button click event fails to trigger after entering text into an input field

I created a basic calculator. Users can input a value in the designated field and then click on the '+' button. The cursor stays in the input field, allowing users to immediately enter a new value after clicking the '+'. The mouse poi ...

How do I design a reactive form in Angular 8 that dynamically selects another dropdown option based on the selection of one dropdown?

I am a beginner in Angular and currently working on creating a reactive form. I want to have a functionality where selecting one value in a dropdown menu will automatically populate another dropdown menu with relevant data. Here is the object structure tha ...

Images loading slowly causing scrolling to be slow

I've developed an image manager that displays a fixed grid of images in thumbnails. The size of the thumbnails is already relatively small, so reducing them further is not an option. To improve performance, I implemented lazy loading and used a deboun ...

Make sure to deselect all other radio buttons when selecting one, running into difficulties

Having an issue with my UI when selecting radio buttons by clicking on a div: A loop that displays different radio buttons: {% for product in collections.regalos.products %} <li class="grid__item large--one-third gift-card"> <div class="gift-s ...

Ensure that the checkbox is always selected

My goal is to have a checkbox always checked unless we intentionally want it to be unchecked. Check out the following HTML code: <input type="checkbox" class="custom-control-input" [(ngModel)]="productDetails.iscanRetrunable" name="isc ...

Is it possible to alter the color of the cursor without affecting the color of the text

My preference is to have the cursor color set to #FFF while keeping my font color at #000. Can this be achieved? ...

Conceal the bootstrap tooltip instead of completely getting rid of it

Can we hide bootstrap tool-tips without completely removing them? I am utilizing server-side data in the tool-tips and I want to avoid reloading data every time a tool-tip is shown. $('.selector').popover({ animation: true, trigger: &apos ...

Code snippet to copy an element to the clipboard while preserving all of its styles

Currently, I'm attempting to duplicate a div and store it in the clipboard. The div has its own unique styles, including a background. While I've managed to create a script that can copy the div itself, integrating the background property has bee ...

Display the div only when all input fields contain content

I am looking to create a form with multiple input fields, where I want to display a div only when all the input fields are filled. If any of the input fields are empty, the div should disappear. I have managed to achieve this functionality for one input f ...

Choosing a class using CSS

Can someone please help me with editing this HTML code using CSS? I'm trying to target the coupon divs using #coupon but it doesn't seem to be working. Any assistance would be greatly appreciated. <div class="coupon"> <h1>Classic ...

Optimizing web content for iOS Safari with min-height media queries

I'm currently working on a Bootstrap-based photo browser that needs to have a responsive 4:3 aspect ratio. To achieve this, I have implemented the following approach: #carousel { width: 320px; height: 240px; ... } Additionally, I utilize media ...

Utilize Jquery to extract the element's identifier and substitute the value in a[href*=' # '] with the extracted Id

I am in the process of developing a one-page portfolio website with a fixed vertical header. I want the headings on the header to highlight as I scroll down to the related sections of the page. <div class="vert-nav"> <ul> & ...

Styling Borders in CSS/HTML

Having an issue with the CSS on my website, specifically when hovering over links in the navigation bar. I'm trying to add a border around the link when hovered over, but it's causing the other links to shift position. Here's what I have so ...

Are Django form widgets like datepicker and tabindex being snubbed?

I have been working on creating a stylish form and managed to find some interesting CSS to enhance it. The form is looking good, however, a couple of fields are not displaying correctly; particularly one that is associated with a choice field as the model ...

Reorganize divisions using Bootstrap

I am exploring different ways to manage responsiveness through the reordering of divs. While I am aiming for a solution that is highly flexible, any suggestion would be appreciated. Desktop View: https://i.stack.imgur.com/boSOa.png Mobile View: https:// ...

Utilize JavaScript to send login information to a website

I have a specific task in mind: creating a script that will automatically fill in certain data on an HTML website. To illustrate, let's imagine the site is the StackOverflow login page and I want to input my username and password. For the username fi ...

Steps for showcasing all elements on the homepage

Having an issue where I'm trying to display all my components on the home page, such as service, about, and contact pages, but only the home and footer are currently visible. Below is the code snippet from App.js where I've set up the routes for ...

Div refuses to clear floats

Working on an app at and encountering an issue with the main container not clearing floats, causing overflow on the content. Attempted to use this CSS: .clearfix:after { content:""; display: table; clear: both; } Added the class to the main ...

PHP Algorithm - Duplicating items retrieved from MySQL query within a While Loop for each iteration

I'm struggling to understand the situation at hand. I have 3 tables - tag, post, and tag_post - all mapped out properly. On a page where posts are displayed, I first execute a query SELECT * from POST. Within the loop for these results, I then run an ...