Blur transition on CSS-defined borders

Looking to create a large button with a blurred background image that unblurs on hover. I've implemented a container with overflow hidden and adjusted the margin on the background image for defined edges.

However, during the transition from blurred to unblurred, or vice versa, the image edges lose definition. This results in the white container underneath becoming visible until the blur is fully applied or removed.

Any thoughts on how to resolve this issue?

body {
  background-color: black;
}

.container {
    position: fixed;
    top: 2.5vh;
    left: 2.5vh;
    width: 50vh;
    height: 50vh;
    background-color: white;
    overflow: hidden;
}

.image {
    background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
    margin: -5%;
    width: 110%;
    height: 110%;
    filter: blur(6px);
    transition: 1s;
}

.image:hover {
    filter: blur(0px);
}
<!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <div class="image"></div>
            placeholder text
        </div>
    </body>
</html>

htmlcsscss-transitionscss-filters

Answer №1

I believe the issue may be related to a bug in the browser.

In some cases, the container background may bleed through at the edges.

To reduce this visibility, you can make the container background match the image. I have utilized the 'inherit' property in the image to prevent duplicate settings.

body {
  background-color: black;
}

.container {
    position: fixed;
    top: 2.5vh;
    left: 2.5vh;
    width: 50vh;
    height: 50vh;
    background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
    overflow: hidden;
}

.image {
    background-image: inherit;
    margin: -5%;
    width: 110%;
    height: 110%;
    filter: blur(6px);
    transition: 1s;
}

.image:hover {
    filter: blur(0px);
}
<!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <div class="image"></div>
            placeholder text
        </div>
    </body>
</html>

Answer №2

It seems like the issue is stemming from the negative margin and 110% width and height settings within the .image css class. My assumption is that you implemented these to achieve a crisp edge when blurred. I made some adjustments to those properties, and the code snippet below showcases the updated result. Hopefully, this will be of help:

body {
  background-color: black;
}

.container {
    position: fixed;
    top: 2.5vh;
    left: 2.5vh;
    width: 50vh;
    height: 50vh;
    overflow: hidden;
}

.image {
    background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
    margin: 0;
    width: 100%;
    height: 100%;
    filter: blur(6px);
    transition: 1s;
}

.image:hover {
    filter: blur(0px);
}
<!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <div class="image"></div>
            placeholder text
        </div>
    </body>
</html>

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

Centering bootstrap columns in a WordPress template

I am facing an issue with aligning columns in a bootstrap section within a Wordpress template that I am working on. The problem is that the columns on the second line of the row are not centered. Currently, the layout displays 4 columns in the top row and ...

htmlcssbootstrap-4

What is the best way to ensure the website title is displayed properly on a mobile browser?

Concern I have been encountering difficulties while constructing a portfolio website using bootstrap 5. The issue arises with the navbar, causing the Title to overlap the hamburger menu and extend beyond the edge of the screen. Strangely enough, this prob ...

htmlcssnavbarbootstrap-5mobile-browser

What is the best way to programmatically insert new rows into a table

I am currently working with the foundation 5 framework (not sure if this is relevant). I need to ensure that each CELL is treated as a distinct item/value when passing information to another page, and I am unsure of how to approach this issue. It should cr ...

javascripthtmlcsszurb-foundation

Using `encodeURIComponent` to encode a URL does not function properly when used with a form action

After experimenting with the encodeURI function in conjunction with a form, I discovered an interesting behavior. I used encodeURI to encode a URL. <html> <head> </head> <body> <form id="form"> </form> <button id="bu ...

javascripthtml

Encountered a SyntaxError stating 'Unable to use import statement outside a module' while attempting to utilize three.js

I'm facing difficulties with incorporating three.js into my project. Initially, I executed: I am referring to the guidelines provided here: In my VS Code terminal for the project folder, I ran the following command: npm install --save three Subsequ ...

javascripthtmlthree.js

On mobile devices, the height of the absolutely positioned element is larger than its

I currently have an element with a background image that includes an absolutely positioned element at the bottom. As the screen width decreases, the height of the absolutely positioned element increases and surpasses the parent element. Since absolutely p ...

javascripthtmlcss

The functionality of the jQuery .click method appears to be malfunctioning within the Bootstrap

It seems like my JQuery.click event is not functioning as expected when paired with the corresponding button. Any ideas on what might be causing this issue? Here's the HTML CODE snippet: <button id="jan7" type="button" class="btn btn-dark btn-sm"& ...

javascriptjqueryhtmlcssbootstrap-4

Tips for effectively displaying elements on a page

After making changes to my css/html code, all the elements within a div are now displayed in a single line instead of appearing as separate <p>contents</p> tags with each on a new line. An example of this issue can be seen here: Dealing with C ...

htmlcss

Guide for displaying information as a grid or table format using Angular 4

I am tasked with handling data from an external microservice that is not always in a standard format. The data is dynamic and can include table data, along with metadata information above the grid. My challenge is to render or identify the table data, disp ...

javascripthtmlnode.jsangularnpm

Troubleshooting: Custom icons not displaying in Next.js application

Every time I attempt to use icons that I have loaded into my source code, I keep getting this default icon displayed: I'm uncertain about what exactly is causing this issue. Here is the layout of my file tree for reference: When attempting to utiliz ...

htmlcssreactjsnext.js

Utilizing AngularJS to create a dynamic autocomplete feature with data sourced

I'm currently implementing an autocomplete feature using the REST Countries web service. The goal is to provide suggestions as the user starts typing in an input field, and once a country is selected, display information about it. I am considering usi ...

angularjshtmlapi

Deactivating one div's class upon clicking on another div

Below is the HTML code snippet: <div class="container"> <ul class="navbar"> <li class="nb-link"><a>Home</a></li> <li class="dropdown"> <a>CBSE</a> <ul class="dropdown-menu"&g ...

javascriptjqueryhtmlcss

Is there a challenge in setting up a tag search bar similar to Stack Overflow's?

First and foremost, I apologize for the awkwardly phrased question. The issue at hand is that when the tags exceed the container size, the search option becomes hidden. My goal is to have the search bar adjust dynamically, moving everything back inside the ...

jqueryhtmlcss

Utilizing FormHelper in CakePHP to send search query to controller parameter

How can I pass a form directly to a controller parameter in CakePHP 2.4? The controller expects the parameter in the format /Model/index/by:keyword, but FormHelper is adding a question mark and an equals sign into the URL: Model/index?by%3A=keyword. Here ...

phphtmlformscakephpget

Creating an If statement to evaluate the state of a parameter

In my simple Graphics User Interface, when the user clicks on "move", a yellow rectangle div moves across the screen. Now, I am trying to implement an event based on the position of the rectangle on the page. For example, if the div is at 400px (right), t ...

javascriptjqueryhtml

Verify whether the chosen options from a dropdown list coincide with a predetermined value

I am working with a form that generates dropdown lists dynamically. <c:forEach var="companyList" items="${company.detailList}" varStatus="status"> <tr> <td>c:out value="${companyList.employeeName}" /></td> <td> <select ...

javascriptjqueryhtmltwitter-bootstrap

Failure to display masonry arrangement

I am working on creating a stunning masonry layout for my webpage using some beautiful images. Take a look at the code snippet below: CSS <style> .masonryImage{float:left;} </style> JavaScript <script src="ht ...

javascriptjqueryhtmlcssjquery-masonry

No matter what I try, the design of my dialog box remains stubbornly unchanged

I am attempting to increase the width of my dialog box while also adding horizontal middle borders. It seems that my bootstrap for the site does not include these elements. How can I rectify this issue? Here is my code: $(document).ready(function() { ...

javascriptjqueryhtml

Modifications to the toolbar styling are made by the Angular Material mat-form-field

Having some trouble creating an input field in my component alongside a mat-toolbar element. When I try to insert a mat-form-field, it ends up messing with the styling of the mat-toolbar. I've been unable to pinpoint exactly where the issue lies (if ...

cssangularangular-material

A confined space that is scrollable, yet keeps any overflow hidden without displaying a scroll bar

Is there a method for creating a overflowing div that conceals the overflow, does not display a scroll bar, but remains scrollable (via mouse wheel or touch input)? For example: <!DOCTYPE html> <div id="longtext" style="width:100px; height ...

htmlcssscrollscrollbaroverflow