What could be causing the image to peek through the color overlay?

When I add a black overlay to images, I notice that the edges of the row of images slightly peek out from under the overlay. The size of the images seems to affect this issue differently. Check out the CodePen below to see it in action with Bootstrap 4 CSS & JS loaded. I've also included links to images showing the problem for different screen sizes. Any help or suggestions would be greatly appreciated!

CodePen: https://codepen.io/anon/pen/vMOwLb

HTML

<div class="card-container mx-auto">
    <div class="card-deck flex-row flex-nowrap card-deck-topic bkg-color">

        <div class="card card-topic">
            <a href="#" class="topic-card-box">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />

                <div class="card-body card-body-topic card-body-topic-align">
                    <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
                </div>
            </a>
        </div>

       <div class="card card-topic">
            <a href="#" class="topic-card-box">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />
                <div class="card-body card-body-topic card-body-topic-align">
                    <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
                </div>
            </a>
        </div>

        <div class="card card-topic">
            <a href="#" class="topic-card-box">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />

                <div class="card-body card-body-topic card-body-topic-align">
                    <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
                </div>
            </a>
        </div>

    </div><!-- END CARD DECK -->
</div><!-- END CARD-CONTIANER -->

CSS

html{
    font-size:62.5%;
}

.card-deck{
  margin-top:50px
}

.card-container{
    max-width:1400px;
    width:95%;
}

.card-body{
    max-width:250px;
    padding-left:10px;
    margin-top:-2px;
    cursor:pointer;
    transition:.3s;
    -webkit-transition:.3s;
}


.card-deck{
    display: flex;
    overflow: auto;
}

img.card-img-top{
    max-width:250px;
}

.card{
    margin-right:16px;
    border:none;
    flex: 0 0 auto;
}

.bkg-color{
        background-color:purple;
}

.card-block-img{
    margin-bottom:1.75rem;
    margin-top: 3.2rem;
}

.card-block-txt{
    margin-bottom:2.4rem;
}

    .card-sub-topic-title{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        font-family: 'Lora', "Georgia", "Times New Roman";
        color: #fff;
        font-size: 2.4rem;
        line-height: 3.4rem;
    }

    .card-body.card-body-topic.card-body-topic-align{
        margin-top: 0px;
    }

    .card-topic{
        border:0px !important;
        box-shadow: -8px 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin-left: 10px;
    }

    .card-body-topic{
        background-color: #0000009e;
        border:0px !important;
    }

    .card-topic.card .card-body:hover{
        background-color:#000000c7;
        border: 0px !important;
    }

    .card-body-topic-align{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width:100%;
    }

@media only screen and (min-width: 768px) {

    .card-deck {
        display: flex;
        padding-bottom: 75px;
    }   

    .card-body{
        min-width:350px;
    }

    img.card-img-top{
        min-width:350px;
    }

    .card-block-img{
        margin-bottom:6rem;
    }

@media only screen and (min-width:992px){

    .card-deck .card{
        margin-right:15px;
    }

    .card-body{
        min-width:100%;
    }

    img.card-img-top{
        min-width:100%;
    }

.card-body-topic-align{
    transform: translate(-50%, -50%);
}

.topic-container{
  padding-top:95px;
  margin:6.4rem 0 10.4rem 0;
}

Images

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

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

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Updated

.card-body-topic-align{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width:100%;
}

converted to 

.card-body-topic-align{
        position: absolute;
        top: 0%;
        left: 0%;
        /* transform: translate(-50%, -50%); */
        height: 100%;
        width:100%;
    }

and eliminated:

@media only screen and (min-width:992px){
  .card-body-topic-align{
    transform: translate(-50%, -50%);
  }
}

Your previous transform didn't cover all areas on different screen sizes due to rounding issues; demonstration below also worked for me using your code-pen example:

   html {
  font-size: 62.5%;
}

.card-deck {
  margin-top: 50px
}

.card-container {
  max-width: 1400px;
  width: 95%;
}

.card-body {
  max-width: 250px;
  padding-left: 10px;
  margin-top: -2px;
  cursor: pointer;
  transition: .3s;
  -webkit-transition: .3s;
}

.card-deck {
  display: flex;
  overflow: auto;
}

img.card-img-top {
  max-width: 250px;
}

.card {
  margin-right: 16px;
  border: none;
  flex: 0 0 auto;
}

.bkg-color {
  background-color: purple;
}

.card-block-img {
  margin-bottom: 1.75rem;
  margin-top: 3.2rem;
}

.card-block-txt {
  margin-bottom: 2.4rem;
}

.card-sub-topic-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  font-family: 'Lora', "Georgia", "Times New Roman";
  color: #fff;
  font-size: 2.4rem;
  line-height: 3.4rem;
}

.card-body.card-body-topic.card-body-topic-align {
  margin-top: 0px;
}

.card-topic {
  border: 0px !important;
  box-shadow: -8px 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-left: 10px;
}

.card-body-topic {
  background-color: #0000009e;
  border: 0px !important;
}

.card-topic.card .card-body:hover {
  background-color: #000000c7;
  border: 0px !important;
}

.card-body-topic-align {
  position: absolute;
  top: 0%;
  left: 0%;
  /* transform: translate(-50%, -50%); */
  height: 100%;
  width: 100%;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">


<div class="card-container mx-auto">
  <div class="card-deck flex-row flex-nowrap card-deck-topic bkg-color">

    <div class="card card-topic">
      <a href="#" class="topic-card-box">
        <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />

        <div class="card-body card-body-topic card-body-topic-align">
          <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
        </div>
      </a>
    </div>

    <div class="card card-topic">
      <a href="#" class="topic-card-box">
        <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />
        <div class="card-body card-body-topic card-body-topic-align">
          <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
        </div>
      </a>
    </div>

    <div class="card card-topic">
      <a href="#" class="topic-card-box">
        <img src="https://images-na.ssl-images-amazon.com/images/I/91V8Nhn8CDL._SL1500_.jpg" class="card-img-top" />

        <div class="card-body card-body-topic card-body-topic-align">
          <p class="card-sub card-sub-topic-title">Title Here<span class="line-two">Second Line of Text</span></p>
        </div>
      </a>
    </div>

  </div>
  <!-- END CARD DECK -->
</div>
<!-- END CARD-CONTIANER -->

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

Tips on invoking a factory method from a different service method in AngularJS

I have a factory method that goes like this.. (function (angular) { "use strict"; angular .module('app') .factory('UserService', ['$rootScope', '$q', function ($rootScope, $q) { ...

javascripthtmlangularjsinterceptorfactory-method

Children transform when the parent element is being hovered

I need assistance with changing the child element when the parent is hovered over. I also want to modify an attribute of the parent at the same time. Specifically, I want the background color of #action to change and also adjust the color of the a or h1 el ...

htmlcsssass

Creating a dynamic multi-item carousel with Materialize (CSS) cards using data from a loop - here's how!

Using a for loop, the following code generates a list of cards. These cards are intended to be displayed in a carousel with 4 cards visible at once, and a next arrow button allows users to navigate through the next set of 4 cards. Materialize cards have ...

javascriptcssdjango-templatescarousel

Having trouble with the dropdown feature on AngularJs?

Encountering an issue while trying to display the dropdown list. Upon inspecting in Chrome, it seems like the data is loading correctly but when clicked, the dropdown menu does not show up. The data is fetched from the BooksController and all options are ...

javascripthtmlangularjs

"Even when hidden, an HTML Div element still occupies space on the

I encountered an issue with my tabbedPage setup. Even though I have hidden content, it still occupies space on the page. Here is the code snippet that I am using: let tabHeader = document.getElementsByClassName("tabbedpage-header")[0]; let tabIndicator = d ...

javascripthtmlcss

Implement a default dropdown menu that displays the current month using Angular and TypeScript

I am looking to implement a dropdown that initially displays the current month. Here is the code snippet I have used: <p-dropdown [options]="months" [filter]="false" filterBy="nombre" [showClear] ...

htmlangulartypescriptprimeng

Web Scraping for Results on Android

Hello, I am embarking on a new endeavor in Android Studio where I am attempting to build an application that can submit a form on a website's HTML and then parse the resulting HTML page for data. While I have some experience with Jsoup in the past, my ...

androidhtmlweb-scrapingjsoupheadless-browser

Concealing the content of multiple items through sorting with the help of jquery

I need help with hiding the content of all elements while dragging or sorting the list. Can someone assist me with this? Here is my working fiddle. My jQuery code used in the fiddle is: $( function() { $( "#sortable" ).sortable(); $( "#sortable" ).disable ...

jqueryhtmlcssjquery-ui

Issue with nextElementSibling not applying CSS style

My current issue revolves around a button that is designed to open or close a collapsible div. The HTML structure of this element looks like the following: <div class='outer-collapsible'> <button type='button' class='col ...

javascripthtmlcss

Creating a directory using PHP's `mkdir` function with special characters results in a

My approach involves using special characters to display galleries-folders on the main page. The folders are created based on user input and I prefer not to use special characters in URLs, but rather to show content through the use of glob. $foldername= $ ...

phphtmlforms

Precise column measurement

I'm currently working on a jQuery project where I need to create a table with columns of exact widths. For example, let's say I want the first column to be exactly 100px wide, including padding (10px on each side). I've tried various combin ...

jquerycss

No JavaScript needed for this CSS framework

I have been tasked with creating a website without the use of JavaScript, following very specific instructions. Furthermore, it must be compatible with iPhone and other mobile devices, while still adhering to the no JavaScript rule. I am open to utilizing ...

phphtmlcsswebcss-frameworks

What methods can be used to incorporate animation when the display attribute transitions to none?

Is there a way to add animation in a Vue app when replacing elements? I would like the transition from, for example, clicking on a div with 'Num 1' to the divs with class 'showing' not disappear abruptly but smoothly, such as moving to ...

javascriptcssvue.js

Is there a way to wrap the "#+ATTR_HTML" tags around the preview output of the "#+RESULTS" Source Block in Org-mode for Emacs?

Using plantuml in org works fine for me. However, I am looking to enhance it by automatically inserting some HTML tags just before the #+RESULTS output tag. This will help achieve a more visually appealing HTML output effect. Here's an example of my ...

htmloutputorg-modeattrplantuml

Mobile responsiveness issue with Bootstrap image heights

Creating a website with an image positioned at the top below the navigation bar. Utilizing Bootstrap 4 and CSS for this project. To ensure that the image spans the full width of the screen on larger devices, I employed background-image. For mobile devices, ...

cssimagemobilebootstrap-4height

Generate a div dynamically and incorporate a function that triggers on click event dynamically

In my current project, I am faced with a challenge due to laziness. My goal is to automatically generate menu buttons that are linked to different sections of a page using raw JavaScript. The issue arises when the body content of my site is loaded from an ...

javascripthtml

AngularJS uses double curly braces, also known as Mustache notation, to display

I'm currently working on a project where I need to display an unordered list populated from a JSON endpoint. Although I am able to fetch the dictionary correctly from the endpoint, I seem to be facing issues with mustache notation as it's renderi ...

javascripthtmlangularjsjson

The search functionality in an Html table is currently malfunctioning

Currently, I am working on developing a search mechanism in HTML. It seems to be functioning properly when searching for data for the first time. However, subsequent searches do not yield the expected results. Additionally, when trying to search with empty ...

javascriptjqueryhtml

What is the best way to create a horizontal scrolling feature for a two-row layout using Bootstrap?

When using one row, the script works successfully. Here is an example of the code: html : <div class="testimonial-group"> <div class="row"> <div class="col-md-4">1</div> <div class="col-md-4">2</div> < ...

htmlcssscrollbootstrap-4row

Switching to AngularJS for an upgrade

I am working with an AngularJS code and HTML. <input type="text" ng-model="selected" uib-typeahead="demos for demos in demo | filter:$viewValue | limitTo:8"> $scope.demo = ['demo-NV-enable','demo-NV-disable','demo-NV-shutdo ...

htmlangularjs