CODEWITHSUNDEEP
jqueryhtmlcsscss-filters
Rameez Iqbal
Rameez Iqbal

Reputation: 507

Apply CSS3 Filter Property to specific part of an Image

I'm working on a project to display different pictures on a wall Like

enter image description here

I want to apply css3 filter property "grayscale" on only picture frame area, not on the whole image https://www.w3schools.com/cssref/css3_pr_filter.asp

Any idea how to do that, maybe by applying some x,y coords to filter?

Thanks

Upvotes: 1

Views: 1497

Answers (2)

Michael Mullany
Michael Mullany

Reputation: 31715

You can use an SVG filter referenced via CSS to filter a sub-section of your content. The filter window is defined by the dimensions specified in the feFlood.

img {
 filter: url(#partgrey);
}
<img src="https://upload.wikimedia.org/wikipedia/commons/9/90/Jos%C3%A9_Villegas_Cordero_-_The_Slipper_Merchant_-_Walters_37105.jpg">


<svg>
  <defs>
  <filter id="partgrey" primitiveUnits="objectBoundingBox">
    <feFlood x="0.1" y="0.1" width="0.2" height="0.35"/>
    <feComposite operator="in" in="SourceGraphic"/>
    <feColorMatrix type="saturate" values="0"/>
    <feComposite operator="over" in2="SourceGraphic"/>
  </filter>
  </defs>
</svg>

Upvotes: 2

Martijn
Martijn

Reputation: 16103

  • Take a div, give it that image as background.
  • Now place a div over the painting in the image
  • Give that inner div the save background as the image, but offset the background

Crude example as demo (might not be 100% exact overlay): 

#Outer, #Inner{
    background-image: url('https://i.sstatic.net/7kczi.jpg');
}
#Outer{
    position: relative;
    width: 687px;
    height: 687px;
}
#Inner{
    position: absolute;
    left: 19%;
    top: 5%;
    width: 420px;
    height: 320px;
    background-position: 49% 10%;
     filter: grayscale(100%);
 }
<div id="Outer">
    <div id="Inner"></div>
</div>

Upvotes: 0

Related Questions