Cover or hide the top of box-shadow so 3 sides are shown?

Question

I currently have a div that when hovered shows another div in it's place, the div shown in it's place has a box-shadow of 1 px on all sides, I am trying to cover the top shadow line so that the shadow is only shown on the left, right and bottom.

Edit: I would like the shadow to remain on all 4 sides but to be covered by a div on the top. Not the vertical axis changed. I'm wondering if this is possible.

http://jsfiddle.net/8yeh9cw6/

Is this possible to cover or will it always bring the shadow to the top of anything? Ideally with pure css, otherwise is it possible with jquery or javascript?

Possible duplicate of [How to get box-shadow on left & right sides only](https://stackoverflow.com/questions/11997032/how-to-get-box-shadow-on-left-right-sides-only) — Darren Wainwright, Aug 30 '17 at 12:17

score 0 · Answer 1 · answered Aug 30 '17 at 12:16

a simplistic solution you can nudge shadow on y-axis

.shoptitle {
    overflow: hidden;
    background-color: #FFF;
    padding: 15px;
}
.parentItem {
    height: 200px;
    background-color: #e7e7e7;
    float: left;
    margin-left: 1px;
    margin-bottom: 1px;
}
.I33 {
    width: 33.2%;
}
.hoveredItem {
    opacity: 0;
    transition: opacity 0s 0.2s;
    position: relative;
    background-color: #FFF;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.9);
    width: 100%;
    height: 200px;
    /* box-shadow: 0px 1px 1px rgba(0,0,0,0.2); */
}
.itemDisplay {
    opacity: 1;
    transition: opacity 0s 0.2s;
    position: relative;
}
.parentItem:hover .hoveredItem {
    opacity: 1;
}
.parentItem:hover .itemDisplay {
    opacity: 0;
}

<div class="shoptitle">Cover top shadow</div>

<div class="parentItem I33">
<div class="itemDisplay"></div>
<div class="hoveredItem">hai</div>
</div>

more correct solution.. refer CSS box-shadow on three sides of a div?

Thanks, that is what I was wanting it to look like but I'm wondering if this can be done by covering the top shadow with a div not by changing to y-axis? — , Aug 30 '17 at 12:28

Asifuzzaman Redoy · Accepted Answer · 2017-08-30T14:16:50.147

Hello Try the code below i have added some jQuery

$(".hoveredItem").mouseover(function(){
   
$(this).css({
  "box-shadow":"0px 6px 10px rgba(0,0,0,0.9)"
  
 });
});

.shoptitle {overflow:hidden; background-color:#FFF; padding:15px;}
.parentItem{ height:200px; background-color:#e7e7e7; float:left; margin-left:1px; margin-bottom:1px; }
.I33{width:33.2%; }

.hoveredItem{opacity:0;transition:opacity 0s 0.2s ;position:relative; background-color:#FFF;  width:100%; height:200px; /* box-shadow: 0px 1px 1px rgba(0,0,0,0.2); */} 
.itemDisplay{ opacity:1;transition:opacity 0s 0.2s;position:relative;}
.parentItem:hover .hoveredItem {opacity:1;  }
.parentItem:hover .itemDisplay{opacity:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shoptitle">Cover top shadow</div>

<div class="parentItem I33">
<div class="itemDisplay"></div>
<div class="hoveredItem">hai</div>
</div>

Thanks, this is useful to know. But the top shadow still shows slightly by the looks of it with this solution, it looks like 1px of shadow, I am looking for a solution with a div that covers the top shadow / line rather than the vertical axis changed. — , Aug 30 '17 at 12:52
Hello See the updated snippet and let me know you are oky with it or not @Beth — Asifuzzaman Redoy, Aug 30 '17 at 14:17

Cover or hide the top of box-shadow so 3 sides are shown?

2 Answers2