remove blur effect on child element

by

Create a div inside content & give bg image & blur effect to it. & give it z-index less the the opacity div, something like this.

<div class="content">
    <div class="overlay"></div>
    <div class="opacity">
        <div class="image">
            <img src="https://stackoverflow.com/questions/22406478/images/zwemmen.png" alt="" />
        </div>
        <div class="info">
             a div wih all sort of information
        </div>
    </div>
</div>

Use Css

.content{
    float: left;
    width: 100%;
}

.content .overlay{
    background-image: url("https://stackoverflow.com/questions/22406478/images/zwemmen.png");
    height: 501px;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    z-index:0;
}

.opacity{
    background-color: rgba(5,98,127,0.9);
    height:100%;
    overflow:hidden;
    position:relative;
    z-index:10;
}

More Related Contents:

  1. CSS Not Being Responsive
  2. Bold tag breaking the divs?
  3. When to use IMG vs. CSS background-image?
  4. Font Awesome 5 on pseudo elements shows square instead of icon
  5. Center image horizontally within a div
  6. Li item on two lines. Second line has no margin
  7. How to change the height of a ?
  8. Add a background image (.png) to a SVG circle shape
  9. How can you customize the numbers in an ordered list?
  10. Is it bad to use !important in a CSS property?
  11. How do I make an editable DIV look like a text field?
  12. Style input element to fill remaining width of its container
  13. ‘position: sticky’ not working when ‘height’ is defined
  14. Wrap text in tag
  15. Flexbox column-reverse in Firefox, Edge and IE
  16. Make row stretch across all columns in CSS Grid
  17. Flexbox affects overflow-wrap behavior
  18. Why does a filter gradient on a pseudo element not work in IE8?
  19. How do I remove the top margin in a web page?
  20. How to specify the order of CSS classes?
  21. Using :after to clear floating elements
  22. Bootstrap 3 – How to maximize input width inside navbar
  23. 404 page not found – Go rendering css file
  24. Center a large image of unknown size inside a smaller div with overflow hidden
  25. How to pass parameters to css classes
  26. Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2
  27. Is there any way to add padding to select options via CSS?
  28. CSS Selector for No-Children-But-Not-Empty
  29. Table vertical header?
  30. CSS/HTML: How do I change the color of the check mark within the checkbox input? [duplicate]

Leave a Comment