the art of stacking divs with clever css techniques

As I continue to learn about the relationship between CSS and divs, I am facing a challenge with creating a blur effect that only affects the background of each rollover, not the red image overlaying it. I am unsure of the best approach to solve this issue.

Check out the code on jsfiddle

CSS:

.bg {
    width:100%;
    padding:70px 0px 70px 0px;
}
.wrapper {
    width:94%;
    max-width:800px;
    margin:0px auto;
}
.itemLeft {
    width:48%;
    background-color:#777;
    float:left;
    margin-left:1%;
    margin-right:1%;
}
.item {
    width:100%;
    background-position:center center;
    text-align:center;
    background-image:url("http://lorempixel.com/300/150/sports/");
    background-repeat: no-repeat;
}
.item img {
    text-align:center;
}
.item:hover {
    cursor:pointer;
    width:100%;
    background-position:center center;
    text-align:center;
    background-image:url("http://lorempixel.com/300/150/sports/");
    background-repeat: no-repeat;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

HTML:

<div class="bg">
    <div class="wrapper">
        <div class="itemLeft">
            <div class="item">
                <img src="http://placehold.it/128x150/a00000" />
            </div>
        </div>
        <div class="itemLeft">
            <div class="item">
                <img src="http://placehold.it/128x150/f00000" />
            </div>
        </div>
    </div>
</div>
htmlcss

Answer №1

The blur effect is added to the .item component and its children, meaning the img component will always appear blurred if it is a child.

One solution could be to change .item and img to be sibling components instead:

Updated Demo

<div class="itemLeft">
    <div class="item"></div>
    <img src="http://placehold.it/128x150/a00000" />
</div>

By doing this, you can use absolute positioning on the .item component relative to the parent element, .itemLeft, to ensure it fills the entire element using top: 0/left: 0/bottom: 0/right: 0.

.itemLeft {
    position: relative;
}
.item {
    width: 100%;
    background: url("http://lorempixel.com/300/150/sports/") center center / auto auto no-repeat;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Then position the img component to create a stacking context so that it appears above the sibling.

.wrapper img {
    position: relative;
    vertical-align: top;
}

Finally, utilize the selector .itemLeft:hover .item to apply the blur effect to the .item component. This way, it will trigger when hovering over the parent element rather than the .item component.

Updated Demo

.bg {
    padding: 70px 0px;
}
.wrapper {
    width: 94%;
    max-width: 800px;
    margin: 0px auto;
}
.itemLeft {
    width:48%;
    background-color:#777;
    float:left;
    margin-left:1%;
    margin-right:1%;
    position: relative;
    text-align: center;
}
.item {
    width: 100%;
    background: url("http://lorempixel.com/300/150/sports/") center center / auto auto no-repeat;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
.wrapper img {
    position: relative;
    vertical-align: top;
}
.itemLeft:hover .item {
    cursor:pointer;
    width:100%;
    background-position:center center;
    text-align:center;
    background-image:url("http://lorempixel.com/300/150/sports/");
    background-repeat: no-repeat;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}
<div class="bg">
    <div class="wrapper">
        <div class="itemLeft">
            <div class="item"></div>
            <img src="http://placehold.it/128x150/a00000" />
        </div>
        <div class="itemLeft">
            <div class="item"></div>
            <img src="http://placehold.it/128x150/f00000" />
        </div>
    </div>
</div>

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

The "Splash Screen Div" page displayed during transitions and page loading

Creating a "Splash Screen Div" for a loading page involves waiting until everything is loaded and then hiding or moving the div off screen. Below is an example: index.html <div id="loading-Div"> <div id="bear-Logo"> < ...

javascriptcsshtml

Creating an HTML button to reveal additional text on the same page

Currently, I am working on a project involving html and javascript. My issue lies in displaying multiple options on the same webpage without switching pages. Essentially, I have a plot and a few buttons on one page, and when a user clicks on any of these b ...

javascripthtmlcssbutton

Unable to toggle sidebar in Angular Material component

I'm trying to create a template similar to Youtube using angular material, but I've hit a roadblock with the sidebar navigation. Here are the requirements for the template: 1. The sidebar should be open by default (based on screen size) 2. When t ...

htmlangularjsangular-material

Unable to vertically align an image within a navigation bar item that is not the brand

Having a unique issue for which I cannot find a solution. In the navbar of Bootstrap 4, I am attempting to include an image next to one of the items, not the navbar-brand as commonly asked about. When Bootstrap 4 is loaded with a custom alpha dark theme, ...

htmlcssbootstrap-4

What is the best way to show a select list on top of another element?

I'm currently working on a project using this React Template. Within one of the components, there's a Select List followed by a Card element. The issue arises when I click on the list, as the items appear beneath the card: https://i.sstatic. ...

htmlcssbootstrap-4z-indexreactstrap

The Jsoup function for sending data does not yield any results

Can someone assist me with sending data to a form in this format? <form id="money" action="" method="post"> <input id="user" type="text" placeholder="Username" maxlenght="10" name="user"></input> <div class="select"> <select id= ...

javascriptjqueryhtmlajaxjsoup

Arrange the select default option using AngularJS as the first option

I've been working on a project using Angular where I fetch data from a JSON file and push it to an array object. This data is then displayed in the options of a select element. My issue is: The default option with selection appears first, but I only ...

javascriptangularjshtml

Menu Selector on the Right Side

I am currently working on a drop down menu and trying to align it to the right using HTML and CSS. Below is an example that I have been referencing: http://codepen.io/anon/pen/RNLmvq Attached here is a screenshot of how the menu appears without the text ...

csshtmldrop-down-menu

Exploring characteristics using DocumentTraversal

My goal is to list out the attributes of elements using DocumentTraversal specifically for IE11. While I have been successful in enumerating element attributes, I am facing an issue when trying to do the same with attributes. The enumeration stops at the f ...

javascripthtmldocumenttraversal

Why does the lazy loading feature keep moving the background image around?

While trying to incorporate lazy loading on my website, I encountered an issue where the image position would change after it was fully loaded and made visible. I experimented with rearranging the order in which my JavaScript and CSS files were called, bu ...

javascripthtmlcsslazy-loading

Ensuring the sort icon is constantly displayed in MudDataGrid

Is there a way to keep the sort icon visible at all times in mudgrid without any default sorting using mudblazor? I have implemented the advanced data grid from the following link:- I have attempted using sortable=true on both the column and datagrid but ...

c#htmlcssmudblazor

Ways to make a div fill the whole screen and allow for scrolling as well

Issue I'm facing an issue with the login.php screen and the addphoto.php screen. I want these screens to cover the entire page, but despite using the following code: .login-screen, .form-screen { position: fixed; top: 0; left: 0; disp ...

htmlcss

Eliminate the bottom padding on the body in your HTML and CSS code

My Unique Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <style> /*RESET BLOCK START ------------------------------------------------------------------------------------------------------------------*/ ...

htmlcssflexbox

Using regular expressions in Python with PyQt4 to eliminate anchor tags from HTML links in text

When using my QTextBrowser, I am able to identify links such as "www.test.com" with the following regular expression: re.compile( r"(\b(?:(?:https?|ftp|file)://|www\.|ftp\.)[-A-Za-z0-9+&@#/%?=~_()|!:,.;]*[-A-Za-z0-9+&@#/%=~_()|])" ...

pythonhtmlregex

Determining the offsetWidth and scrollWidth for option elements within a select field containing the multiple attribute on Internet Explorer 11

My select input element has multiple attributes and a fixed width set. Unfortunately, due to the fixed width, the overflowing content in the x-direction is not visible. To address this issue, I have created a JavaScript function that uses the title attribu ...

javascripthtmlcss

When utilizing "column-count" with "display: flex", both Firefox and IE will only render a single column

I am struggling to achieve a two-column layout with nested columns inside each one. The code I used looks great on Chrome and Safari, but on Firefox and IE, it only displays in a single column: What mistake am I making here? .two-columns { column-cou ...

cssflexboxcss-multicolumn-layoutcolumn-count

Enhance your website with a dynamic jQuery gallery featuring stunning zoom-in

I am currently working on a mobile website project and I'm in need of a gallery feature that allows users to zoom in on images and swipe through them using touch gestures. After some research, I haven't been able to find a suitable solution in j ...

javascriptjqueryhtmlmobile

Split total based on checkboxes toggled with JavaScript

I'm facing a challenge. I have a total sum of donations collected, for example, 10€. Additionally, there are various NGOs that one can select to donate to. Individuals have the option to toggle on/off which NGO's they wish to contribute toward ...

javascripthtmlcheckboxtoggle

Compatibility issues arise when trying to use jQuery Mobile in conjunction with jQuery UI

I'm currently developing an HTML5 application that needs to function seamlessly on desktops, tablets, and mobile devices. However, I've encountered a hurdle when it comes to implementing progress bars and dialog boxes. Initially, I was using jQue ...

javascriptjqueryhtml

Embedding PHP code within inline styles

Is it possible to incorporate a variable inside my progress bar? I want the progress to change based on the status of each project ($projek), but inserting the variable directly into the style attribute doesn't seem to be working. Here's the code ...

phphtmllaravel