Ways to eliminate the white lines from the card-img within an img-overlay card?

I'm currently working on a website layout that includes cards arranged in a row with multiple columns using Bootstrap 4.5. However, I've encountered some unexpected white lines within the borders of the card-img that I am struggling to eliminate:

https://i.sstatic.net/6icwl.png

After inspecting the CSS code, I noticed that padding is applied to the card-img, but I'm unsure whether these visible lines are border-related or something else entirely. It seems like they may be coming from their "parent" element.

<div class="row row-flex d-flex row-black align-items-stretch">
    <div class="col-md-6 col-xl-4 card-col">
        <div class="card border-dark">
            <img class="card-img grad-bg1" aria-hidden="true">
            <div class="card-img-overlay">
                <h1 class="text-center"><i class="fa fa-flask text-light" aria-hidden="true"></i></h1>
                <h3 class="card-title">Flask!</h3>
                <h5 class="card-text text-center">It's a lab!</h5>
            </div>
        </div>
    </div>
</div>

The respective CSS styles are as follows:

.row-black {
    background-color: #000;
    color: #fff;
    min-height: 286px;
    padding-top: 1.61%;
    padding-bottom: 1.61%;
    padding-left: 6.85% !important;
    padding-right: 6.85% !important;
    align-items: center;
    justify-content: center;
}

.card-col {
    margin-top: 1.61%;
    margin-bottom: 1.61%;
}

.card {
    background-color: transparent !important;
    border-radius: 30px;
    min-height: 350px;
    height: 100%;
    max-height: 350px;
    border: none !important;
    background: transparent;
}

.card-img {
    border-radius: 30px;
    height: 100%;
    border: none !important;
    margin: 0;
    padding: 10px;
}

.card-img-overlay {
    height: 100%;
    width: 100%;
    padding: 50px;
    align-items: center;
    justify-items: center;
    border: none !important;
}

.card-title {
    text-align: center;
    border: none;
}

.grad-bg1 {
    background: -moz-linear-gradient(135deg, rgba(60, 176, 219, 1) 0%, rgba(6, 26, 85, 1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(60, 176, 219, 1) 0%, rgba(6, 26, 85, 1) 100%);
    background: linear-gradient(135deg, rgba(60, 176, 219, 1) 0%, rgba(6, 26, 85, 1) 100%);
    height: 100%;
    width: 100%;
    border: none !important;
}
htmlcssbootstrap-4overlay

Answer №1

The missing "border" is a result of not having the src attribute on your image tag.

You can either achieve your desired outcome without it or simply add a src to the image tag.

HTML

<div class="row row-flex d-flex row-black align-items-stretch">
  <div class="col-md-6 col-xl-4 card-col">
    <div class="card border-dark">
      <div class="card-img-overlay grad-bg1">
        <h1 class="text-center">
          <i class="fa fa-flask text-light" aria-hidden="true"></i>
        </h1>
        <h3 class="card-title">Flask!</h3>
        <h5 class="card-text text-center">It's a lab!</h5>
      </div>
    </div>
  </div>
</div>

CSS

.row-black {
    background-color: #000;
    color: #fff;
    min-height: 286px;
    padding-top: 1.61%;
    padding-bottom: 1.61%;
    padding-left: 6.85% !important;
    padding-right: 6.85% !important;
    align-items: center;
    justify-content: center;
  }

  .card-col {
    margin-top: 1.61%;
    margin-bottom: 1.61%;
  }

  .card {
    background-color: transparent !important;
    border-radius: 30px;
    min-height: 350px;
    height: 100%;
    max-height: 350px;
    border: none !important;
    background: transparent;
  }

  .card-img-overlay {
    height: 100%;
    width: 100%;
    padding: 50px;
    align-items: center;
    justify-items: center;
    border: none !important;
  }

  .card-title {
    text-align: center;
    border: none;
  }

  .grad-bg1 {
    background: -moz-linear-gradient(
      135deg,
      rgba(60, 176, 219, 1) 0%,
      rgba(6, 26, 85, 1) 100%
    );
    background: -webkit-linear-gradient(
      135deg,
      rgba(60, 176, 219, 1) 0%,
      rgba(6, 26, 85, 1) 100%
    );
    background: linear-gradient(
      135deg,
      rgba(60, 176, 219, 1) 0%,
      rgba(6, 26, 85, 1) 100%
    );
    height: 100%;
    width: 100%;
    border: none !important;

    border-radius: 30px;
  }

Demo

https://codepen.io/vagelisp/pen/yLaeMVg

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

Creating two divs with equal heights in React using Material-UI at 50% each

I am currently utilizing a Material UI template within a react JS project. My goal is to create a div (or Grid in MUI) that spans 100% of its container's height, containing two nested divs (or Grids) that are each set at 50% height. If the internal c ...

cssreactjsmaterial-ui

The Angular ng-repeat directive is populating a list with items, but the parameters enclosed in double curly braces

After calling an API, the response contains data in the following format: [{name: "ABC", age: 20}, {name: "DEF", age: 25}] Even though the $scope.names variable is assigned with the array from the API, when viewed in the browser, it displays 2 rows but th ...

htmlangularjs

What method is most effective for loading HTML content depending on the device being used?

Looking for the optimal method to load different div elements based on the device accessing my website without relying on user agent checks. As of now, I am utilizing CSS media queries to determine device specifications and display the appropriate div acco ...

htmlcss

Unable to add a border to the thumbnail containing text

Is there a way to achieve a nice border on my thumbnail section below? I attempted using a container but it resulted in the text overflowing on md or sm screen widths. <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset ...

htmlcsstwitter-bootstrap

Enhancing the SVG font size through custom CSS styling

Working with an SVG element and utilizing CSS to adjust the font-size of the text within the SVG. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720"> <rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"& ...

csssvg

Arranging Columns on Top of Each Other in Bootstrap 5

I need assistance with aligning a Bootstrap column above another one. The design I am aiming for includes an image on the left, with some text partially overlapping it. The title on the text column should be positioned just after the image, not above it. ...

htmlcsstwitter-bootstrapbootstrap-5

I am facing issues with getting my slideshows to work on localhost using node

After careful positioning of my divs using position: relative; for the slideshow and position: absolute; for containers, I am facing an issue. Despite trying to fix it based on similar questions posted by others, the slideshow is not functioning properly. ...

javascripthtmlcssnode.jsexpress

Addressing responsiveness problems with Bootstrap navigation bar

Seeking assistance with setting up the fundamental bootstrap grid system. Despite my efforts, I am unable to make it work. Could someone guide me in creating the basic structure for the Navbar above? Specifically, focusing on using columns and rows with p ...

jqueryhtmlcsstwitter-bootstrap

Customizing Bootstrap navbar classes - ineffective

Having trouble overriding some of Bootstrap's navbar classes. I've tried using !important, but would prefer to avoid it if possible. This is the HTML I'm working with: <nav class="navbar navbar-default" role="navigation"> <ul cl ...

htmlcssbootstrap-4

Using Python and Selenium to Scroll Down the Page (with Two Separate Scrollbars)

I need help scrolling down the conversation section on Facebook Messenger. There are 2 scroll bars on the page, and I specifically want to scroll down scroll bar number 1 (see image) Click this link to access the page (make sure you are logged in and hav ...

pythonhtmlseleniumwebdriver

Display Bootstrap 4 Carousel thumbnails on the right side rather than the bottom

I have implemented the Bootstrap 4 carousel slider with the help of this example. In the example provided, I am trying to align the bottom thumbnails to the right side along with the thumbnail text, similar to the image attached below. https://i.sstatic. ...

htmlcssbootstrap-4

JavaScript encounters an incomplete string literal error while saving dynamic content

Although I know this question has likely been asked before, I am struggling with the error mentioned above. My goal is to create a cortina effect menu where the child div's content changes based on a variable from a drop-down menu. To test it out, I ...

javascriptjqueryhtml

Chrome users may encounter difficulty grabbing the horizontal textarea scrollbar if a border-radius has been applied

Check out this JSFiddle for more information <textarea wrap="off" rows="5" style="border-radius: 4px">aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbb aa ...

htmlcssgoogle-chrome

Sending data from HTML and JavaScript to Python

In the process of developing a website that will operate on an embedded device, I am implementing an interface for users to engage with multiple functions on the site. These functions within the HTML interface will communicate with a Python script, which i ...

javascriptpythonhtmlvariables

Extracting JSON array values using Ajax

$('#button').click(function(){ $.ajax({ url : "data.php", data : $("#tableData"), type : "POST", success : function(result){ result = eval('('+ result +')'); ...

javascriptphpajaxhtml

Discover the process of incorporating secondary links into your dabeng organizational chart!

I need to incorporate dotted lines on this chart, such as connecting leaf level nodes with middle level nodes. import OrgChart from '../js/orgchart.min.js'; document.addEventListener('DOMContentLoaded', function () { Mock.mock(&apo ...

javascriptjquerycssorgchart

The size of HTML select input varies among IOS, Android, and Windows devices

Does anyone know of a CSS property that can be used to tailor the styling specifically for IOS devices in order to achieve a similar look to that of windows and android?https://i.sstatic.net/VMSXb.jpg I attempted using -webkit, but unfortunately it did no ...

javascripthtmlcssresponsive-designselectinput

Experiencing an error while trying to implement a node.js server-side service through AngularJS. Encountering the error message: "Error: [$injector:nomod] Module ‘angularjsNode

An error has occurred: Error: [$injector:modulerr] Failed to instantiate module angularjsNodejsTutorial due to: Error: [$injector:nomod] Module ‘angularjsNodejsTutorial’ is not available! You either misspelled the module name or forgot to load it. If r ...

htmlangularjsnode.js

Automatically log users out of Django and update the backend after a period of inactivity without requiring any additional requests

In my Django project, I am working on a simple multiplayer system where I need to update the isCurrentlyActive value in a user-related model automatically and then log them out. I tried using middleware following a solution from this post, which works well ...

javascripthtmlcssdjango

Why is my canvas element not fully extending on the page even though I've set its scrollHeight property

Currently developing a browser extension for Chrome and Edge that adds a Canvas to any webpage, allowing me to draw rectangles. The Canvas should ideally stretch the entire scrollHeight of the page, but unfortunately falls short just before reaching the f ...

javascripthtmlcssdomhtml5-canvas