Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Why is image peeking out from color overlay?

Tags:

html

css

twitter-bootstrap

bootstrap-4

I have put a black overlay on images but I notice that the row images slightly peak out of the overlay along the edges. Different sizes effect the row of images differently. I have created a CodePen that loads Bootstrap 4 CSS & JS so this can be seen live. I also have uploaded images below that show evidence of it in case you're having better luck than I depending on your screen size. Help is 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

Image 1

Imgae 2 - Close Up

like image 503
user5854648 Avatar asked Apr 02 '19 19:04

user5854648

People also ask

How do I overlay color on an image?

The overlay effect can be achieved by using CSS “background-image” and CSS “background” properties. it can be done by assigning an image to the background-image property and setting the color in the background property. Moreover, it is a technique of combining more than one element in a single container.

How do you overlay colors in Photoshop?

Go to Styles and click Color Overlay. Select and apply an overlay color. Click the Blend Modes drop-down and select Overlay. Move the Opacity slider to the desired level.

How do I add a background image to overlay?

In short, CSS overlay effects are achieved by using the following: background-image and background CSS properties to add image and linear-gradient overlay effect. position:absolute , top , bottom , right , left CSS properties to control the position of overlay image or text.

How do you overlay colors in CSS?

Use mutple backgorund on the element, and use a linear-gradient as your color overlay by declaring both start and end color-stops as the same value.

1 Answers

Changed

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

into 

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

and removed:

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

your transform was not able to cover all the areas in all screen sizes... there must be some rounding happening which is preventing all pixels from being covered; demo below worked for me on your code-pen example also:

    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%;
}

@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%;
    }
    .topic-container {
      padding-top: 95px;
      margin: 6.4rem 0 10.4rem 0;
    }
<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 -->
like image 51
Akber Iqbal Avatar answered Oct 17 '22 22:10

Akber Iqbal
Sign in to Comment

Related questions

CSS last of type does not match while still loading
Arranging divs automatically while making one div bigger
Bring a context menu on clicking to a more button using css
Issue with Safari and CSS Columns
How to use addHTML in angular 4
How to get rid of accents just with CSS
Pandoc is not rendering SVG images when converting from html to docx format
target="_blank" not working on some mobile devices
Echarts: Line dissapear when Zooming in
How to detect selected option in datalist when has duplicate option?
Poor Performance for Form Rendering In Django 1.11
Change logo div background color as it scrolls
How to pass content in TinyMCE's textarea to a PHP file directly instead of sending via AJAX?
Svg animations not running on Safari
Import external JS scripts in Google Colab html
why my jquery script doesn't work in my include php file?
Preloading content via rel=preload returns "headers do not match"
How to dynamically switch color themes using SASS?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!