Achieving a shadow effect above a CSS border: tips and tricks

<div class="row">
   some content

   <div class="info-box">
      some other content
   </div>
</div>


.row {
    float: left;
    margin-bottom: 1.5%;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    background-color: rgb(250, 250, 250);
    width: 685px;
    -webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
}


.row:hover {
    background-color: rgb(240, 245, 245);
    -moz-box-shadow:    inset 0 0 5px #4d4d4d;
   -webkit-box-shadow: inset 0 0 5px #4d4d4d;
   box-shadow:         inset 0 0 5px #4d4d4d;

}

.info-box {
    position: relative; 
    border-left: 1px solid #e3e3e3;
    padding: 15px;
    width: 170px;
    font-size: 0.93em;
    color: #363636;
    float: left;
}

Incorporating the info box inside a row is causing an issue where the inner shadow created on row:hover gets overlapped by the border of the info-box during hover state. Would it be possible to adjust the stacking order so that the shadow appears on top of the border? Your insights are much appreciated.

Kindly note that z-index manipulation has not yielded the desired results for me.

css

Answer №1

It's essential for the child to be on top of the parent in order to prevent it from being hidden. To achieve this effect, you need to add the shadow to an element that appears after the .info-box. An easy way to do this without extra markup is by using the :after pseudo-element.

You can see an example of this in action at this fiddle, where I have demonstrated the basic concept - although some adjustments may be needed for perfect positioning.

Here's a brief overview of what I did:

  1. Set .row with CSS property position: relative to allow for positioning of children relative to it.
  2. Moved everything except the background property from the .row:hover rule to a new .row:hover:after rule.
  3. Included content: ' ' to ensure the pseudo element displays correctly.
  4. Applied positioning, height, width, top, and left to cover the available width with the pseudo element.

EDIT: Felipe mentions in the comments that clicking through to objects within .row may be hindered by the :after element. He suggests using pointer events with pointer-events: none to address this issue (supported in most browsers aside from IE and Opera). Check out my updated example here to see this solution in action.

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

Shorten/Alternate coding:

Sometimes, creating the content section of a website can be time-consuming. I recently spent half a day crafting the index page of my website at . However, when attempting to add an additional image to the list of six already present, it turned into a leng ...

phphtmlcss

Applying Bootstrap classes to adjust font weight

Are there any pre-existing Twitter Bootstrap classes that can be used for styling font weight, such as font-weight: bold and other variations? I'd prefer not to reinvent the wheel if Bootstrap already has this capability. ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Get the value of a CSS property in Python by parsing the rendered HTML

Currently, I am using Selenium and PhantomJS in conjunction with Python for the purpose of crawling rendered web pages. While it is a straightforward process to identify the presence of specific words within the HTML content (e.g. if "example" in html...), ...

pythonhtmlcssseleniumphantomjs

Background image fixed with scrolling effect

I've been struggling with a parallax effect on my website. After seeing it work smoothly on other websites, I tried to implement it myself but couldn't quite get it right. The background image keeps moving when I scroll the page and I want it to ...

javascriptjqueryhtmlcssparallax

Positioning the dropdown under the search input in Ngbootstrap

Currently, I am referencing this specific documentation as I am interested in constructing a search bar similar to Gmail's layout. The search bar will consist of an input field along with a dropdown button that will display filter options. Regrettabl ...

cssangularbootstrap-4ng-bootstrap

What is the reason the link:visited attribute is not functioning properly for a specific page link?

I have set up links between different pages on my website. What I want is for the link that a visitor clicks on to change color once they've visited that page. Unfortunately, this feature isn't working for me and I'm not sure why. Here&apo ...

htmlcsshyperlink

Preserving content following the use of jQuery's fadeIn/fadeOut methods

I have a jQuery function that fades in and out a sprite (sprite without text) from one background to another, and it's working as intended. However, this function is also fading out the text within an element. HTML: <div id="menu"> <ul c ...

jquerycssfadeinfadeout

How can a div be utilized to create a footer with two columns?

Is there a way to design a two-column footer using only divs and no tables? The dimensions of the footer are set at 980px and it needs to include... Copyright 2010 xyz.com (to be placed on the left side) About us | privacy | terms (to be placed on the r ...

cssxhtmlhtml

Is there a way to place my searchbox in the top right corner of the page?

I am currently working on creating a search function for my list of products. However, I have encountered an issue where the searchBox is not appearing in the top right corner as intended. Despite trying various solutions, I have been unsuccessful in movin ...

javascriptcssreactjs

Having trouble vertically aligning text in Bootstrap 4?

I'm having trouble getting the text to align vertically in the middle and closer to the image. The vertical-align:middle property doesn't seem to be working for me. Additionally, when I resize the screen width, the layout changes from a horizonta ...

htmlcssbootstrap-4

Move the check mark to the middle of the screen

I am a beginner in HTML and I am trying to create a logout page that should have a design similar to this: https://i.sstatic.net/ld1R1.png I attempted to create it but I am struggling to position the icon correctly and I also want the whole content to be ...

htmlcss

Styling the text of segmented bars in ControlsFX using CSS

Is there a way to customize the size and color of the text for the ControlsFX segmented bar? I've attempted the typical method: -fx-font-size: 15px Unfortunately, it doesn't seem to be effective. Whether it's through CSS or code, I'm ...

javacssjavafxcontrolsfx

An effective approach to automatically close an Expansion Panel in an Angular Mat when another one is opened

I am attempting to implement functionality where one expansion panel closes when another is opened. By default, the multi attribute is set to "false" and it works perfectly when using multiple expansion panels within an accordion. However, in this case, I ...

htmlcssangulartypescriptangular-material

Adding CSS and JavaScript files to HTML files within a Spring MVC 4 application

I'm encountering issues when trying to import my CSS files using spring 4 Initially, I attempted the following in index.html: <link href="../../resources/css/bootstrap.min.css" rel="stylesheet"> Although Eclipse did not detect any errors, th ...

csseclipsespring-mvc

What is the process for implementing a unique font style to the placeholder, text box, and button elements on a website?

I am looking to incorporate a unique font from my computer for the placeholder and button text. Here is how I defined my @font-face: @font-face { font-family: customfont2; src: url(Font/otf/segment14.regular.otf); } Currently, I a ...

htmlcssbuttonfont-faceplaceholder

Resolving the issue of "Cannot set properties of null (setting 'innerHTML') at HTMLInputElement.loader" involves identifying the root cause and implementing

Need assistance with this code. Although I believe everything is correct, it still isn't working as expected. The error mentioned in the title comes up whenever I try to use it. I've made multiple modifications to the code but it's still not ...

javascripthtmlcss

Ways to reach the standard look

Check out this follow-up to a previously posted issue. Click here to view it I am currently facing an issue with the code below, where I am unable to make the second button inherit the default border and padding styles. Any assistance would be greatly app ...

jquerycsshtmljquery-animate

Position a div element after another using the :after pseudo-element

My goal is simple to explain, but I have exhausted all my efforts trying to achieve it. I am hoping for the ★ symbol to appear immediately after the number 06 using jQuery. Any assistance would be greatly appreciated. The numbers are generated by a s ...

javascriptjqueryhtmlcss

Tips for adding a border to a table cell without disrupting the overall structure of the table

Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border. Here's the sim ...

htmlcsstypescriptprimeng

The text displayed on the image is experiencing fluctuations

I am experiencing an issue on my website where the post text fluctuates rapidly when the mouse hovers over the image. I have a site where I display the post text on mouseover of the image. Can someone please help me solve this problem? You can test it by ...

htmlcsswordpress