Issue with blurriness transition at the boundaries of the parent container

Is there a way to blur the background Div inside a wrapping div without the blur propagating up to the parent element during the transition?

The issue arises when transitioning the opacity of the child div, causing feathered edges that disappear after the transition.

HTML / Jade

div
  div( class="bg" style="background: url('http://placekitten.com/300') no-repeat center center; background-size: cover;")

SCSS

div  {
  cursor: pointer; cursor: hand;
  .bg{
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    transition: 550ms ease-out;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    transform: scale(1.1);
    }
}
div {
  position: relative;
  height: 500px; width: 500px;
  overflow: hidden;
  background-color: rgba( 0, 0, 0, 1);
}
div:hover {
  .bg {
    opacity: .6;
  }
}

If you're experiencing this issue in Chrome, check out this codepen for reference:

http://codepen.io/LAzzam2/pen/kXdwWp

Any suggestions on how to fix this problem would be greatly appreciated! Thank you!

htmlcsswebkitblur

Answer №1

If you're looking to enhance your design with an SVG filter, check out this helpful resource:

http://codepen.io/LAzzam2/pen/pbmAJB

HTML Code Snippet

<div class="wrapper">
  <div class="bg">
    <svg id="svg-image">
        <image x="0" y="0" id="svg-image" width="100%" height="100%" xlink:href="http://placekitten.com/300" />

        <filter id="blur-effect-1">
            <feGaussianBlur stdDeviation="2" />
        </filter>
    </svg>
  </div>
</div>

CSS Styles

#svg-image-blur { height: 220px; width: 320px; }

.bg {
  transition: all 250ms ease-out;
  opacity: 1;
  position: absolute;
  top: 50%; left: 50%;
  height: 100%; width: 100%;
  transform: translate( -50%, -50%) scale( 1.05 );
  -webkit-backface-visibility: hidden;
}

.wrapper {
  cursor: pointer; cursor: hand;
  overflow: hidden;
  height: 450px; width: 450px;
  position: relative;
  background-color: black;
}

#svg-image { 
  height: 100%; width: 100%;
  filter:url(#blur-effect-1); 
}

.bg:hover {
  opacity: .6;
  transform: translate( -50%, -50%) scale( 1.15 );
}

Answer №2

To achieve the desired effect, consider wrapping the background image and applying animation to transform that element. You can also add a blur effect to the child of the animated element for added visual appeal.

Check out this example on CodePen

HTML div .wrap div( class="bg" style="background: url('') no-repeat center center; background-size: cover;")

CSS

div  {
  cursor: pointer; cursor: hand;
  .wrap {
    transition: all 250ms ease-out;
  }
  .bg{
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    transition: 550ms ease-out;
    position: absolute;
    top: -10px; left: -10px;
    width: calc( 100% + 20px );
    height: calc( 100% + 20px );
    }
}
div {
  position: relative;
  height: 500px; width: 500px;
  overflow: hidden;
  background-color: rgba( 0, 0, 0, 1);
}
div:hover {
  .wrap {
    opacity: .6;
    transform: scale(1.5);
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Toggle between displaying and concealing content by clicking or hovering the mouse

I have a button that is positioned at the top of the browser. I want to show a dropdown list when the user clicks or hovers over this button. HTML <div class="translator"> <div class="translate-btn">Translator</div> <div class="t ...

jqueryhtmlcss

Arranging li elements using grid placement

I'm facing some difficulty with aligning my li elements properly within rows. Despite trying various approaches, including using nth-child selectors and IDs for testing purposes, I am still unable to resolve the issue as expected. #section2 { w ...

csscss-grid

What is the proper way to enable card wrapping within list groups?

I am currently exploring ways to make cards within a list group wrap if there is not enough space. For instance, if I have 4 cards in a list group all set to 25% width, how can I ensure that the fifth card appears on the row below? While researching this ...

htmlcssbootstrap-4

I need help fetching the selected value instead of the option value in PHP

Can anyone offer some assistance with my issue? I have an HTML and PHP function where I am trying to echo a selected value, not the option value. Here is the desired output: "Patrick or any other name when I select and send the button" <?php ...

javascriptphpjqueryhtml

Specific height of a table row <tr>

I'm having difficulty setting a PRECISE height on an html table row. https://i.sstatic.net/5mP39.png The left column consists of two divs, each with a height of 44px, while the right column contains the table. The height of each row is set to 44px, ...

htmlcsssass

Choose a particular component from a snippet of a view

I am facing challenges with implementing a JavaScript function in a partial view. My objective is to validate the email input and display a message based on the validation result. The email field is located inside a partial view that is dynamically loade ...

javascriptjqueryhtmlruby-on-rails

"Click-to-Submit Button Triggering Error Notification before Redirecting to New Page

I am looking to implement an error message for a button and then redirect the user to a specific URL. However, I am unsure of how to achieve this using JQuery as I am relatively new to it. The idea is that the user uploads a file and then clicks on the Sub ...

javascriptjqueryhtml

Unable to dynamically display an HTML5 video using JavaScript

I'm facing an issue with displaying videos in a modal dynamically. Here's the scenario: +------------+---------+ | Name | View | +------------+---------+ | 1.mp4 | X | | 2.mp4 | X | +------------+---------+ The X ...

javascripthtmlvideo

What is the method for displaying posts using JavaScript?

I'm experiencing an issue and could use some assistance. For instance, if I have HTML code like this: <div class="posts"> posts 1 </div> <div class="posts"> posts 2 </div> <div class="posts"> posts 3 </div&g ...

javascriptjqueryhtmlcss

Adding a class to the following DIV and smoothly transitioning the current one out can be achieved using a dynamic number of items in multiple instances

Is there a way to create a scalable CSS slideshow for text divs without using images? Here is the current HTML structure: <div class="mb-panel-container cf"> <div class="mb-panel-section mb-slider"> <div class="mb-panel active" ...

javascriptjqueryhtmlcssslideshow

Pure CSS navigation - radio buttons to display or hide different pages

I'm attempting to create a website navigation bar using radio buttons, where the pages are displayed based on the selection. So far, I've managed to achieve this using <a href='#div'></a> and a :target, by placing the .page ...

htmlcssnavigationcss-selectors

"Changing the title using a button or anchor: A step-by-step guide

Is there a way to update the title each time a button is clicked on my one-page site that directs to different anchors at the top? ...

htmlcss

Assign properties to hyperlinks within a specific category inside a container using Cascading Style Sheets

I am facing a challenge with two different sets of links on a page; one set is in an unordered list, while the other is in a table. I need both sets to have shared attributes but different widths. Specifically, I want the links in the table to be aligned i ...

htmlcss

Use the CSS3 filter property with opacity(X) as the primary option, and fallback to opacity:X if needed. Similarly, implement the filter property with

I am interested in incorporating the CSS3 filter:opacity() and filter:drop-shadow() properties into my designs, as they are known to be hardware accelerated in certain browsers on specific machines. However, I want to ensure I have a fallback option to reg ...

cssopacitybox-shadowcss-filters

Customizing Names in AngularJS Based on Selected Options in Dropdown Menu

I have encountered a slight problem that I am hoping someone can assist me with. It is quite simple if I only needed to take the ID, but unfortunately, I require another piece of information. I have labels for each of my drop-down lists and for one of them ...

htmlangularjsdrop-down-menu

What causes the bootstrap grid system to deviate from the intended column sizes?

Here is the alignment I am aiming for with the Phone and Extension fields in the form: https://i.sstatic.net/JRmDU.png This is the code snippet I have written for the Phone and Extension row: <div class="row form-group"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is there anyone who can assist in refining the padding and margin issues within this Galleria.js implementation?

I am struggling to understand why the padding and margins around the images in this slideshow theme on PregoApp are uneven. Despite my attempts to adjust the CSS, the issue persists. You can view the site here. Another website using the same implementati ...

jquerycssslideshow

I'm puzzled as to why my CSS rule is being greyed out despite being more specific and crucial. It's frustrating that this doesn't seem to make a

After reviewing the answer provided in this link, it seems to explain why certain CSS rules are greyed out in Chrome's element inspector. In my case, however, the entire CSS rule appears to be greyed out, indicating that another rule is taking preced ...

cssgoogle-chromeweb-inspector

Ways to determine if a Less file matches the compiled CSS file

Recently, I inherited a website that utilizes LESS for CSS pre-processing. My task involves updating certain styles; however, I am uncertain whether the former developers made changes to the LESS files and then compiled the CSS, or if they simply edited th ...

cssless

How can I prevent the background image from overlapping the footer?

Click here for image Live version can be found at this link The background image extends beyond the footer. body { background-image: url(../img/planet.jpg); background-repeat: no-repeat; background-size: cover; } Footer: .footer { padd ...

csstwitter-bootstrapbootstrap-4