CODEWITHSUNDEEP
htmlcss
peter
peter

Reputation: 29

css - transition for hover:after

I have this CSS code:

.li2 {
    text-transform: uppercase;
    display:inline;
    position:relative;
    font-family: "Trebuchet MS", Arial;
    color: white;
    font-size: 15px;
    margin-left: 70px;
}
.li2:hover {
    position: relative;
}
.li2:hover:after {
    content: url("images/small_show.png"); 
    display: block;
    background-size: 19px 19px;
    width: 19;
    height:19;
    position: absolute;
    left: 34px;     
    top: -30px; 
    transition:0.5s;    

}

...And I want some transition for appear image under text but my code doesn't work. What I have bad? Thank for every answer.

Upvotes: 0

Views: 437

Answers (3)

Nenad Vracar
Nenad Vracar

Reputation: 122087

Try this https://jsfiddle.net/2Lzo9vfc/128/

HTML

<p class="li2">lorem ipsum dolor</p>

CSS

.li2 {
    text-transform: uppercase;
    display:inline;
    position:relative;
    font-family: "Trebuchet MS", Arial;
    color: black;
    font-size: 15px;
    margin-left: 70px;
    position: relative;
    transition: all 0.5s ease-in;
}

.li2:after {
    content: url("http://placehold.it/350x150"); 
    display: block;
    background-size: 19px 19px;
    position: absolute;
    left: 0;  
    top: 20px;
    transition: all 0.5s ease-in;
    opacity: 0;
}

.li2:hover::after {
   opacity: 1; 
}

Upvotes: 1

cocoa
cocoa

Reputation: 3921

I don't know exactly what transition you are looking for, but here is a start. You need to define the properties for ::after before the :hover. Like so: 

.li2 {
    text-transform: uppercase;
    display:inline;
    position:relative;
    font-family: "Trebuchet MS", Arial;
    color: red;
    font-size: 15px;
    margin-left: 70px;
}
.li2:hover {
    position: relative;
}
.li2::after {
    content: url("http://placebabies.com/200/300"); 
    display: block;
    background-size: 19px 19px;
    width: 19;
    height:19;
    position: absolute;
    left: 34px;     
    top: -30px; 
    opacity: 0;
    transition:0.5s;    
}
.li2:hover::after {
    opacity: 1;
}
<ul>
    <li class="li2">List Item</li>
</ul>

Upvotes: 2

Collins Abitekaniza
Collins Abitekaniza

Reputation: 4588

Try using this instead

-moz-transition:0.5s all linear;
-webkit-transition:0.5s all linear;
-o-transition:0.5s all linear;
transition:0.5s all linear;

Upvotes: 0

Related Questions