CODEWITHSUNDEEP
htmlcssanimation
Tyharo
Tyharo

Reputation: 383

Background Image Appearing Over Text

I have a simple menu that I built and that I'm trying add animations to. I added a slide on hover animation but when you hover over the item the slide animation goes over the text blocking it. I'm pretty sure its going to be an easy fix that I'm over looking but help would be appreciated. The issue is coming from these CSS classes I'm pretty sure:

.nav2Active{
    font-size:16px;
    font-weight:bold;
    padding-top:10px;
    padding-bottom:10px;
    width:100px;
    border-left:thin solid transparent;
    background:transparent;
}

.nav2Active::before{
    content:'';
    background:red;
    position:absolute;
    height:30px;
    width:0%;
    -webkit-transition:width .3s ease-out;
    -moz-transition:width .3s ease-out;
    -ms-transition:width .3s ease-out;
    z-index:0;
}

.nav2Active a{
    color:#000;
    text-decoration:none;
    padding-left:10px;
}

.nav2Active:hover::before{
    border-left:thin solid #F60;
    width:100px;
}

.nav2Active:active{
    background: #CCC;
    border-left: #F60;
}

http://jsfiddle.net/pwfv33hs/

Upvotes: 1

Views: 457

Answers (2)

DaniP
DaniP

Reputation: 38252

It's a z-index issue, you set a value for the pseudo element = 0.

.nav2Active::before{
    z-index:0;
}

But all elements has the same value as default. In order to work you can set a -1 value. But I don't like to work with that negative values. I suggest this:

.nav2Active a{
    position:relative;
    z-index:1;
}

Check the UpdatedFiddle

Upvotes: 1

AngularLover
AngularLover

Reputation: 364

Hay its very easy do this :

.nav2Active:hover::before{
    border-left:thin solid #F60;
    width:100px;
    z-index:-1
}

Upvotes: 2

Related Questions