CODEWITHSUNDEEP
cssfilter
Ra Ha
Ra Ha

Reputation: 83

How to keep text color while filtering background image(hover) with css?

I would like to darken the background images however text colors change, as well how Can I avoid it? I tried with background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(./img/1,jpeg) But in this case I have to add url at the end but it is not effiecent way since I have 4 images in this case.

HTML

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">
 <div class="card-group">
      <div class="card img1">


        <div class="info">
          <h5 class="card-title">Planning</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>

      </div>
      <div class="card img2">


       <div class="info">
          <h5 class="card-title">Customer Satisfaction</h5>
          <p class="card-text">Lorem ipsum dolor .</p>
        </div>

      </div>
      <div class="card img3">

          <div class="info">
              <h5 class="card-title">Build</h5>
              <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
            </div>
      </div> 
         <div class="card img4">

          <div class="info">
              <h5 class="card-title">Analyse</h5>
              <p class="card-text">Lorem ipsum dolor sit amet, consetetur.</p>
            </div>
      </div> 

    </div>

CSS

    .card{
        min-height:30vh;
        display: inline-block; 
     }


    .card .info {
        position:absolute;;
        padding:0em 1em;
        bottom:0.5em;

        visibility:hidden;
        color:#5383d3;

        }
        .card-title {
            font-size:1.5em;
            margin-bottom: .1em;
        }
        .card-text {
            font-size:1em;

        }
        .card:hover{
            -webkit-filter: grayscale(150%); /* Safari 6.0 - 9.0 */
            filter: grayscale(150%);

        }
        .card:hover .info  {
        visibility:visible;


        }
  .img1{
    background: url("./img/1.jpeg") no-repeat center center;
  }
  .img2{
    background: url("./img/2.jpg") no-repeat center center;
  }
  .img3{
    background: url("./img/3.jpeg") no-repeat center center;
  }
  .img4{
    background: url("./img/4.jpg") no-repeat center center;
  }

ANother problem is the white spacing between images even there is no border in my cs somehow it looks like there is

enter image description here

Upvotes: 0

Views: 3268

Answers (3)

MaZoli
MaZoli

Reputation: 1543

The Problem for your second problem is an easy mistake that happens quite often. Display inline-block interprets white spaces between elements as it is expecting some inline behaviour. You can either get rid of all white spaces in your code between the div class="card" (sounds strange but works), or even better you use display: flex

.card-group {
    display: flex;
    justify-content: center;
}
.card {
    flex-basis: 25%;
}

Upvotes: 0

MaZoli
MaZoli

Reputation: 1543

To use filters you will have to alter your html a bit. 

<div class="card">
    <div class="img1 img"></div>
    <div class="info">
        <h5 class="card-title">Planning</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
    </div>
</div>

Now you can use your css like that:

.card {
    position: relative;
}

.card .img {
     position: absolute;
     left: 0px;
     top: 0px;
     bottom: 0px;
     right: 0px;
}

.card:hover .img {
     filter: grayscale(100%);
}

Upvotes: 1

MaZoli
MaZoli

Reputation: 1543

You can't just change the background image without changing its content. You can use a pseude element as an overlay though. This has another advantage as you can animate more easily this way. 

.card {
    position: relative;
}
.card:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: rgba(96, 69, 56, 0.5);
    pointer-events: none;
}

Upvotes: 0

Related Questions