CODEWITHSUNDEEP
htmlcss
JuStTheDev
JuStTheDev

Reputation: 235

Put inset shadow behind background image

that seems to be just the other way than all the others want it. I have a menu/navbar like this http://jsfiddle.net/kbu6szvb/.

HTML:

<div id="nav"> 
<ul> 
<li id="special"><a href="">A</a></li> 
<li><a href="">B</a></li> 
<li><a href="">C</a></li> 
<li><a href="">D </a></li> 
<li><a href="">E</a></li>
</ul> 
</div>

CSS:

li {
    float: left;
    display: block;
}

a {
    display: block;
    transition: all 0.6s ease;
    padding: 15px;
    width: 25px;
    height: 25px;
}

a:hover {
        -webkit-box-shadow: inset 0px -50px 0px 0px rgba(229,229,229,0.8);
        -moz-box-shadow: inset 0px -50px 0px 0px rgba(229,229,229,0.8);
        box-shadow: inset 0px -50px 0px 0px rgba(229,229,229,0.8);
}

#special a {
        display: block;
        background-image: url('http://techcommunity.softwareag.com/c/wiki/get_page_attachment?p_l_id=10602&nodeId=11809&title=Preparing+Graphics+For+Your+Mobile+application&fileName=Preparing+Graphics+For+Your+Mobile+application%2FIconTrans.png');
        background-size: 25px 25px;
        background-repeat: no-repeat;
        background-position: center;
        text-indent: -9000px;
    }

When you hover over the elements they are beeing filled from bottom to top with grey color. But I want a home button that has a image as background-image. When the menu element is .active it shall be filled completely and opaque. Sadly, as you can see in the fiddle, the inset-box-shadow ist over the background image and not underneeth.

Thanks in advance

Upvotes: 0

Views: 645

Answers (1)

Brian John
Brian John

Reputation: 599

Background images sit at the very bottom (background) of an element, so to get below that, it has to be wrapped by at least one more element.

You can either move the grey hover to the <li> behind the <a> or you can leave your code as is and use a <span> with a background image.

This updated fiddle demonstrates moving the hover to the <li>: http://jsfiddle.net/kbu6szvb/1/

Upvotes: 2

Related Questions