Gaussian Blur Filter Causes Text Above The Affected Image It to Hide

Gaussian blur filter causes text above the affected image it to hide

Add position: relative to .imageLabel.

body {  margin: 0;}.imageFolder {  float: left;  display: block;  width: calc(100vw / 3 - 0px);  height: calc(100vw / 3 * 2 / 3 - 0px);  border: 0px solid #444;  overflow: hidden;  text-align: center;  vertical-align: middle;}.imageBox {  display: inline;  margin: 0 auto;  width: 100%;  height: 100%;  overflow: hidden;}.imageBox img {  display: inline;  width: 100%;  height: 100%;  object-fit: cover;  transition: all 0.2s ease-in;}.imageLabel {  position: relative;  display: inline-block;  margin: calc(0px - 100vw / 3 * 2 / 3) auto 0;  height: 40px;  line-height: 40px;  font-weight: 700;  font-size: 24px;  padding: 10px 40px;  text-decoration: none;  color: white;  opacity: 0;  text-align: center;  vertical-align: middle;  border: 1px solid white;}.imageFolder:hover > .imageBox img {  width: calc(100% + 30px);  height: calc(100% + 20px);  margin: -10px -15px;  transition: all 0.6s ease-out;  filter: blur(4px);}.imageFolder:hover > .imageLabel {  opacity: 1;  transition: all 0.6s ease-out;}

<a href="">  <div class="imageFolder">    <div class="imageBox">      <img src="http://tim.nikischin.com/library/gallery/087_Charlotte/_IMG4015.jpg" alt="Sample Image">    </div>    <div class="imageLabel">Charlotte</div>  </div></a>

Removing CSS filter: blur effect - doesn't work

The blur filter blurs the entire element you apply it to. It isn't an inherited property, so you can't override it for specific child elements; you need to apply it to only the right things to begin with.

The structure of your li elements looks like this:

<li style="padding-left:1em">
    ::before
    "Text A"
</li>

(copied from Chrome's dev tools)

How can you apply styling to only the text part of that structure, without including the ::before? You... can't. Not with that structure. But if you change the structure to this:

<li style="padding-left:1em">
    ::before
    <span class="blur-this">Text A</span>
</li>

Now you can target just the span for blurring:

.blur-this {
    filter: blur(9px);
}

How to blur an image without blurring the text?

I think you mean blur the image and show the text on hover.

What you need to do is capture the hover on the parent and affect the children.

This is key for the blur:

.card:hover > .card-blur { ... }

To show the text:

.card:hover > .card-img-overlay { ... }

Please check the snippet below

/* Hide the overlay */
.card-img-overlay {
   z-index: -1;
}

/* Hover on card, blur the image */
.card:hover > .card-blur{
    filter: blur(5px) grayscale(1);
}

/* Hover on card, show the text by increasing z-index */
.card:hover > .card-img-overlay {
  z-index: 1;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="card bg-dark text-white">
  <div class="card-blur">
  <img src="https://bi.im-g.pl/im/b5/34/11/z18038965V,Krzysztof-Kieslowski-po-pokazie--Amatora---1979-r-.jpg" class="card-img" alt="...">
  </div>
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Blur Behind Div CSS

backdrop-filter: blur(10px);

It will blur area behind the element.

How to apply a CSS filter to a background image

Check out this pen.

You will have to use two different containers, one for the background image and the other for your content.

In the example, I have created two containers, .background-image and .content.

Both of them are placed with position: fixed and left: 0; right: 0;. The difference in displaying them comes from the z-index values which have been set differently for the elements.

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  width: 1200px;
  height: 800px;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="background-image"></div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
    rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
    quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
  <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum
    tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>

Why the brightness of the image got reduced after applying gaussian filter?

Two things are wrong that cause the image intensity to not be preserved: you first normalize the kernel by dividing by its maximum value, then in the convolution you divide by the number of samples in the kernel. Instead of these two normalizations, normalize just once, when you create the kernel, by dividing by the sum of the kernel values. This makes the sum of the kernel weights equal 1, and causes the convolution to preserve the average image intensity. Note that the convolution computes a local weighted average; in a weighted average we need the weights to add to 1 to avoid a bias.

The dark edges are caused by the padding: you pad with zeros (black), which mixes in with the values at the edges of the image in the convolution. OpenCV likely uses a different bounday condition, or padding of the image. Typical options involve mirroring values, or simply extending the edge values out.

Finally, the main reason your code is slow is that you are using a loop in Python. Python is an interpreted language and hence slow. You could use Numba to speed up the loops (it’s a just-in-time compiler for Python), or simply use the convolution in NumPy, which is implemented in a compiled language.

The other reason your code is slow (which won’t matter much until you fix the first) is that you are not making use of the separability of the Gaussian. You build a 2D Gaussian by multiplying two 1D Gaussian, but instead you could apply two 1D convolutions in sequence. For your example of a 11x11 kernel, the computational cost is reduced from 11*11=121 multiplications and additions to 11+11=22 multiplications and additions. The larger the kernel, the better the speed gain.

How can I make a CSS glass/blur effect work for an overlay?

I was able to piece together information from everyone here and further Googling, and I came up with the following which works in Chrome and Firefox: http://jsfiddle.net/xtbmpcsu/. I'm still working on making this work for IE and Opera.

The key is putting the content inside of the div to which the filter is applied:

body {
    background: #300000;
    background: linear-gradient(45deg, #300000, #000000, #300000, #000000);
    color: white;
}
#mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.5;
}
img {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
    position: absolute;
    left: 100px;
    top: 100px;
    height: 300px;
    width: auto;
}

<div id="mask">
    <p>Lorem ipsum ...</p>
    <img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

---

Related Topics