CODEWITHSUNDEEP
htmlcss
NooBskie
NooBskie

Reputation: 3841

Applying CSS filter on only half of image

I have a overlying div on my image with filter: grayscale(100%); filling up 50% of the containing div but the filter will not apply over my image.

However if I put the image inside my filterBar div it will only make the whole image greyscale. I need the image to be greyscaled in relation to the number rating.

Is this possible to do?

Codepen

HTML

<div class="rating-wrapper-v2 bp-rating row">
  <div class="col-xs-6">
    <div class="filterBar"></div>
    <img src="https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png" style="width: 100px;" alt="Baopals Rating" />
  </div>
  <div class="col-xs-6">
    <p>BAOPALS SCORE</p>
    <span>2.5</span>
    <span>/</span>
    <span>5</span>
  </div>
</div>

CSS

.rating-wrapper-v2{
  width:300px;
}
.filterBar{
  filter: grayscale(100%);
  position: absolute;
  height: 50%;
  width:100%;
  bottom:0;
  z-index:100;
}

Upvotes: 4

Views: 3855

Answers (1)

Dekel
Dekel

Reputation: 62536

The grayscale filter can be only applied to img tags.
There are several ways to solve what you are looking for, this is one of them:

.rating-wrapper-v2{
  width:300px;
  height: 100px;
}
.img-container {
  position: relative;
}
.img-container img {
  position: absolute;
  top: 0;
  left: 0;
}
.img-container .filtered-container {
  width: 100px;
  height: 50px;
  position: relative;
  top: 50px;
  overflow: hidden;
}
.img-container img.filtered {
  top: -50px;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

.stars-container {
  width: 500px;
  height: 100px;
  position: relative;
}
.st-bg {
  position:absolute;
  width: 500px;
  height: 100px;
  background: url(https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png) 0 0 repeat-x;
  background-size: 100px 100px;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.st {
  position:absolute;
  height: 100px;
  background: url(https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png) 0 0 repeat-x;
  background-size: 100px 100px;
}
.st-0-5 {
  width: 50px;
}
.st-1 {
  width: 100px;
}
.st-1-5 {
  width: 150px;
}
.st-2 {
  width: 200px;
}
.st-2-5 {
  width: 250px;
}
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

<div class="rating-wrapper-v2 bp-rating row">
  <div class="col-xs-6">
    <div class="filterBar"></div>
    <div class="img-container">
      <img src="https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png" style="width: 100px;" alt="Baopals Rating" />
      <div class="filtered-container">
        <img src="https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png" style="width: 100px;" alt="Baopals Rating" class="filtered"/>
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <p>BAOPALS SCORE</p>
    <span>2.5</span>
    <span>/</span>
    <span>5</span>
  </div>
</div>

Update

This example demonstrates how to generated a "1-5 stars rating like" with gray background effect:

Note - the CSS there is not complete, but I think the general idea is good enough and you can complete it without me :)

.stars-container {
  width: 500px;
  height: 100px;
  position: relative;
}
.st-bg {
  position:absolute;
  width: 500px;
  height: 100px;
  background: url(https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png) 0 0 repeat-x;
  background-size: 100px 100px;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.st {
  position:absolute;
  height: 100px;
  background: url(https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png) 0 0 repeat-x;
  background-size: 100px 100px;
}
.stars-container.st-0-5 .st{
  width: 50px;
}
.stars-container.st-1 .st{
  width: 100px;
}
.stars-container.st-1-5 .st{
  width: 150px;
}
.stars-container.st-2 .st{
  width: 200px;
}
.stars-container.st-2-5 .st{
  width: 250px;
}
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

<div class="stars-container container">
  <div class="st-bg row"></div>
  <div class="st row"></div>
</div>
<div class="stars-container st-0-5 container">
  <div class="st-bg row"></div>
  <div class="st row"></div>
</div>
<div class="stars-container st-1-5 container">
  <div class="st-bg row"></div>
  <div class="st row"></div>
</div>
<div class="stars-container st-2 container">
  <div class="st-bg row"></div>
  <div class="st row"></div>
</div>
<div class="stars-container st-2-5 container">
  <div class="st-bg row"></div>
  <div class="st row"></div>
</div>

Upvotes: 3

Related Questions