1

I want to implement the image like below image with css. I mean i want to make the image background appear but in front the image should be transparent. I mean it should be covered like blur. I want to achieve like below image.

image

img {
  -webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
position:fixed;
}
<div><img src="http://i.imgur.com/v06GqMK.jpg" /></div>

5
  • @Kode.Error404 i added but the image i want to achieve like above image my image is turning to more blur Aug 4, 2016 at 3:39
  • @HosseinMaktoobian yeah like above image i want to achieve....... Aug 4, 2016 at 3:40
  • 3
    try the filter like this: filter: blur(1px) brightness(0.5);. this will darken your image.
    – hmak.me
    Aug 4, 2016 at 3:41
  • 1
    If you are looking for an overlay then you could refer this post stackoverflow.com/questions/18322548/…
    – z0mBi3
    Aug 4, 2016 at 3:42
  • Thanks for your precious suggestions it solved Aug 4, 2016 at 3:52

4 Answers 4

6

this Is What You Want:

.container {
  background: url("https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/a_exif,c_fill,w_750,h_361/v1426633725/eq54w9myfn6xfd28p92g.jpg") no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  width: 750px;
  height: 361px;
  position: relative;
  text-align: center;
}

.container::before {
  content: "";
  display: block;
  -webkit-filter: blur(1px) brightness(0.5);
  -moz-filter: blur(1px) brightness(0.5);
  -ms-filter: blur(1px) brightness(0.5);
  -o-filter: blur(1px) brightness(0.5);
  filter: blur(1px) brightness(0.5);
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  background: inherit;
  z-index: 0;
}

.content {
  position: relative;
  z-index: 10;
  padding-top: 50px;
}

.title {
  font-family: arial;
  font-size: 3em;
  color: gold;
  font-weight: 900;
  margin: 20px;
}

.text {
  font-family: arial;
  font-size: 2em;
  color: white;
  font-weight: 100;
  padding: 20px;
  border: 1px solid gray;
  display: inline-block;
  width: 40%;
}
<div class='container'>
  <div class='content'>
    <div class='title'>Content Marketing</div>
    <div class='text'>6 Essential Elements You Can't Ignore</div>
  </div>
</div>

1
  • Great work.Thanks. Small description: if someone want to remove padding for blur effect , decrease left top right bottom to 0.1px. Nov 17, 2020 at 7:56
4

You can use CSS pseudo element or other html element to achieve this. Here's an example using the pseudo element :before

.blur {
  position: relative;
  display: inline-block; /* make the div not 100% */
}
/* the 'blur' effect */
.blur:before {
  content: '';
  background-color: #000;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}
.blur img {
  display: block; /* remove bottom space */
}
<div class="blur">
  <img src="http://i.imgur.com/v06GqMK.jpg" />
</div>

0
2

Simply use linear-gradient()

background: linear-gradient(0deg, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url('image.png');

Should do the trick. Cheers.

0

div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

div.transbox {
  margin: 0px;
  background: #fff;
  border: 1px solid black;
  opacity: 0.5;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
<!DOCTYPE html>
<html>

<body>

  <div class="background">
    <div class="transbox">
      <p>This is some text that is placed in the transparent box.</p>
    </div>
  </div>

</body>

</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.