Image in background blurred out

user_14612213 0
Viewed 148

I have 2 question and hope you can help me.

  1. In the screenshot I have attached you can see that there is a person on the left side and some text on the right side. There is a clean transition from image to text. This site from which I got this, is using visual composer. (https://haartransplantation-vergleich.de/chancen/)

    But how is this made by self-coding?

  2. So I want to create something like this as well but I ONLY want the image-background be blurred out a little bit. The text should be readable. How can this be achieved? I've tried something with "before/after" but hasn't worked for me.

Looking forward to hearing from you guys. Hope someone can share some code as well, if possible because I don't know how to create such a call-to-action box with background img blurred.

enter image description here

background-image css html
2 Answers
  • It's a CSS gradient
  • applied to a :before pseudo-element
  • which is styled to fill the full height & width of its "parent" element

Screenshot from Chrome's Web Inspector

This was easy to discover using Inspect Element in Chrome, and looking at the relevant CSS for that element.

Pseudoelements are "enabled" or "created" in CSS (as opposed to regular elements which are written in HTML), simply by writing a selector like this:

/* style HTML element */

.person-grad {
  position: relative; /* provide positioning context */
}


/* create pseudoelement */

.person-grad:before {
  /* property required for the pseudoelement to appear */
  content: '';

  /* make the pseudo-element match the dimensions of the "parent" element */
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* more properties, including background gradient... */
}
user_1290860

You can achieve this effect using linier gradients over your images. An easy way to do this is to build a div with a background image, then place a div with your content within that div. This can be done like so:

<div class="blur">
  <div class="content">
    Content Here
  </div>
</div>

To setup the "Blur" you need to layer your background image below a gradient.

.blur {
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #fff 50%), url('yourImage.png') no-repeat;
}

The 50% portion is where the gradient will begin to feather, adjust this based on your image used.

I went ahead and made a mockup for you HERE

user_133885530
Related