The CSS background shadow on one div behaves differently compared to the neighboring div

Currently, I am facing an issue where I have two divs positioned next to each other in a line.

http://jsfiddle.net/A5Jc7/60/

The HTML structure is as follows:

<div>
    <div class="box1"></div>
    <div class="box2"></div>
</div>

The CSS for the divs is listed below:

.box1 {
    width:200px;
    min-height:200px;
    background:blue;
    float:left;
    margin:20px 0 0 0;
}
.box1:hover {
    background: white;
    box-shadow: 0px 0px 5px 5px #888888;
    height:200px;
    margin:20px 0 0 0;
}
.box2 {
    width:200px;
    min-height:200px;
    background:blue;
    float:left;
    margin:20px 0 0 0;
}
.box2:hover {
    background: white;
    box-shadow: 0px 0px 5px 5px #888888;
    height:200px;
    margin:20px 0 0 0;
}

The problem arises when hovering over the left div, the shadow appears under the right div. Conversely, hovering over the right div causes the shadow to appear over the left div. I've tried using z-index adjustments without success. Any suggestions on how to make both shadows consistent?

htmlcss

Answer №1

Z-index will only be effective for elements that are either absolutely or relatively positioned.

To ensure proper functionality, make sure to include the following in each box:

position:relative;

Additionally, add the following for hover effects:

z-index:1;

If you want shadows to appear behind the parent element of an object, simply apply:

z-index:-1;

For a practical example, visit: http://jsfiddle.net/charlescarver/A5Jc7/64/

This method eliminates the need for using unusual z-index values or absolute positioning, which can lead to additional CSS complexity for styling purposes.

Answer №2

Due to the coverage of your shadow being offset by the first block,

If you adjust the x position in the second box shadow to something like 

box-shadow: 5px 0px 5px 5px #888888;
, that should resolve the issue.

However, if you wish to maintain symmetry, you will also need to modify the offset of the first shadow using 

box-shadow: -5px 0px 5px 5px #888888;

Answer №3

Utilizing absolute positioning is key for proper z-index functionality.

.container-1 {
position:relative;
width:400px;
height:200px; 
}

.element-1{
width:200px;
min-height:200px;
background:black;
position:absolute;
margin:20px 0 0 0;
z-index: 1;
left:0;
 top:0       
}

.element-1:hover{
background: white;
box-shadow: 0px 0px 5px 5px #888888;    
height:200px;
margin:20px 0 0 0;
    z-index:5
}

.element-2{
width:200px;
min-height:200px;
background:black;
position:absolute;
margin:20px 0 0 0;
z-index:1
z-index: 1;
right:0;
 top:0           
}

.element-2:hover{
background: white;
box-shadow: 0px 0px 5px 5px #888888;  
height:200px;
margin:20px 0 0 0;
    z-index:5
}

Answer №4

To achieve the desired effect, apply z-index: -1 to .box1 and z-index: -11 to .box2:hover.

Additionally, make sure to use position:relative for both boxes in order to properly utilize the z-index property.

Your code should look something like this:


.box1 {
width:200px;
min-height:200px;
background:black;
float:left;
margin:20px 0 0 0;   
width: 200px;
z-index: -1;
position: relative;
}

.box2:hover {
background: white;
box-shadow: 0px 0px 5px 5px #888888;  
height:200px;
margin:20px 0 0 0;
z-index: -11;
position: relative;
}

Check out the Fiddle demonstration for a visual representation: http://jsfiddle.net/A5Jc7/63/

The concept behind this setup is to ensure that the shadow of box2 appears below box1 when it is being hovered over.

Answer №5

Visit this link for the code

.box1{
    width:200px;
    min-height:200px;
    background:black;
    float:left;
    margin:20px 0 0 0;
    z-index: 1; 
    position: relative;
}

.box1:hover{
    background: white;
    box-shadow: 0px 0px 5px 5px #888888;    
    height:200px;
    margin:20px 0 0 0;
    z-index:2;
}

Adjusted positioning and z-index properties on hover effect.

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

Complete alignment of several elements in a horizontal scrolling container

In the table-like container, I have elements with horizontal scrolling. Each element has the same width but potentially different heights. I want to add a button in the top-right corner of each element without it disappearing when scrolling. I came across ...

htmlcsscss-position

What is a neat trick to conceal an image when we hover over it?

Within my project, I have a grid layout showcasing images of various items through ng-repeat. My goal is to have the images disappear upon hover, and be replaced by a new div of equal size containing all the sub-components of the item. However, instead o ...

htmlcssangularjs

Content will be displayed below the background image

Help Needed: Content Going Over Background Image Hey there! I'm having a bit of trouble with my home page design. I have a full-width background image, but the content isn't displaying below it like I want it to. Instead, it's showing over ...

htmlcssflexbox

Using JQuery to specify an attribute as "required" along with a value does not function as expected

Something seems off with this: $("#elementId").attr("required", "true"); In Chrome and Firefox, the DOM either displays required as the attribute (with no value) or required="" (empty value). Interestingly, it doesn't make a difference what value w ...

javascriptjqueryhtml

Increasing the nth-child Selector in Jquery

Referring to this I am looking to cycle through the nth-child selector, which involves: var i = 1; var tmp = $(this).find('td:nth-child(i+1)'); // I wonder how this can be achieved i++; I have rows with dynamically generated columns i ...

javascriptjqueryhtmlcss

"Transform the appearance of the datepicker input field with Material 15's dynamic

I am in need of assistance to change the color to white for the input date and add an underline to a datepicker element <mat-form-field class="date-criteria-select " [floatLabel]="'always'"> <mat-label class=" ...

cssangularmaterial-uiangular-materialdatepicker

Struggling to align the header of a column to the center in a mat-table that is sortable?

I am working with a mat-table that has a sortable column similar to the example shown here, but I am having trouble centering the column headers using my CSS file. Interestingly enough, I am able to achieve this when making changes in the browser debugger! ...

htmlcssangular-materialmat-table

The jQuery function .val()/.text() is unable to retrieve information from a particular section of HTML

Implementing HandlebarsJS with PHP and Yii to generate a page. Here is a snippet of the html/handlebars code on the page {{#if embed_link}} <p class='f_hidden_p'> <a href='{{embed_link}}'> {{ ...

javascriptjqueryhtmlcssyii

What is the best way to prevent a jQuery hover event from adding a text-shadow to the CSS?

Currently, I am facing an issue with a jQuery event that triggers a text-shadow effect: $(".leftColumn").hover(function (){ $(".leftColumn h2").css("text-shadow", "0px 2px 3px rgba(0, 0, 0, 0.5)"); },function(){}); The problem arises when the text-shad ...

javascriptjqueryhtmlcss

PHP: Dynamically update div content upon submission

I am attempting to update the "refresh" div after clicking the Submit button and also at regular intervals of 5 seconds. Despite looking through various resources, I have not been able to find a solution that meets my requirements. <script src="h ...

javascriptphpjqueryhtml

I'm curious if there's a method to ensure that the content within a mat-card stays responsive

So I'm working with this mat-card: <mat-card> <mat-card-content> <div *ngFor="let siteSource of siteSources | paginate: { itemsPerPage: 5, currentPage: page};"> <site-details [site]='siteSource'></s ...

cssangulartypescriptangular-material

Executing Python code through a website using PHP - is there a way to deactivate the button once it has been clicked?

Can you assist with the following issue? <?php if(isset($_POST['MEASURE'])) { shell_exec("sudo python /var/www/html/lab/mkdir.py"); } ?> Here is the HTML part: <form method="post" > <input type="submi ...

phppythonhtmlbutton

aligning a form vertically in a container

<div class="parent"> <div class="left-child"> <img src="logo.jpg" alt="logo"> </div> <div class="right-child"> <form action="#"> <input type="text" value="search"> &l ...

htmlcssforms

Rearranging div placement based on the width of the screen

I am currently working on building a responsive website and I need two divs to switch positions depending on the screen width, both on initial load and when resizing. Despite my efforts in researching and trying various options, I have not been successful ...

javascriptjqueryhtmlswap

I recently encountered an issue where the Google Chrome Element Inspector (Developer Tools) unexpectedly removed an HTML element from

While using WordPress, I noticed a strange issue on the admin side when utilizing Google Chrome v.32 Element Inspector (Developer Tools) - some of the elements in my HTML seem to disappear. However, when I view the page without the Developer Tools, all the ...

htmlwordpressgoogle-chromegoogle-chrome-devtools

Creating a PHP Class for Converting CSS3 Rules to Ensure Compatibility Across Different Browsers

Seeking assistance with developing a class that can process a style sheet, identify browser-specific CSS3 rules, and provide compatibility for all browsers. The goal is to simplify the process of writing styles for one browser and then generating CSS files ...

phpcsscross-browser

How to vertically align and center multiple divs with Flexbox programming

I have been grappling with the challenge of aligning two sets of rows vertically, each consisting of an image on one side and text on the other. While I usually use flex to achieve vertical alignment, it seems that a different approach is needed in this pa ...

reactjscssflexboxmaterial-ui

Creating an insert query in Node.js with frontend HTML and connecting it to a PostgreSQL database is a crucial task in web

I am new to working with Node.js, PostgreSQL. Currently, I am tackling the login form code and facing several issues related to the POST method. I am using HTML, Node.js, and PostgreSQL for this project. Please assist me with solving these problems by revi ...

htmlnode.jspostgresql

Colorful radial spinner bar

I am interested in replicating the effect seen in this video: My goal is to create a spinner with text in the center that changes color, and when the color bar reaches 100%, trigger a specific event. I believe using a plugin would make this task simpler, ...

javascriptcssionic-frameworkspinner

Obtain the radio button value along with the values of all other input fields

$('.cinput').each(function(){ console.log($(this).val()); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='radio' name='radiox' class='cinput' v ...

jqueryhtml