CSS remove blur filter on one child

Question

I gave a parent element a blur filter but I want to remove the filter in a child. How can I do it?

This is my HTML:

<div class="left__card">
 <div class="left__card--head">
  <img src="../images/Rawand.jpg" alt="Img" />
 </div>
 <div class="left__card--body">
  <div class="row">
   <h1 class="Name">Rawand Rebwar</h1>
   <h2 class="stage">2'nd Stage</h2>
  </div>
  <p class="paragraph">
   Im computer science student in university of sulaimany , i developed front end for
   this project..
  </p>
  <a href="#" class="profile">Click To See Profile</a>
 </div>
</div>

And this is the CSS Code:

.left__card:hover {
    -webkit-filter: blur(3px)
    -moz-filter: blur(3px)
    -o-filter: blur(3px)
    filter: blur(3px)
}

Also I wanna remove blur on class profile.

score 1 · Accepted Answer · answered May 09 '20 at 20:09

Put your Card inner to an own container and assign the the filter to that container.
The link should be place outside.

<div class="left__card">
  <div class="blurry">
    <div class="left__card--head">
      <img src="../images/Rawand.jpg" alt="Img" />
    </div>
    <div class="left__card--body">
      <div class="row">
        <h1 class="Name">Rawand Rebwar</h1>
        <h2 class="stage">2'nd Stage</h2>
      </div>
      <p class="paragraph">
        Im computer science student in university of sulaimany , i developed front end for this project..
      </p>
    </div>
  </div>
  <a href="#" class="profile">Click To See Profile</a>
</div>

.left__card:hover .blurry {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  filter: blur(3px);
}

CSS remove blur filter on one child

1 Answers1