CODEWITHSUNDEEP
csscss-transitions
Chris
Chris

Reputation: 2646

CSS3 Fade In Before/After Content

I have the following hover effect, how would I now make this fade in and out?

HTML

<article>
    hello world
</article>

CSS

article
{
    position: relative;
    float: left;
    margin: 0 16px 16px 0;
    padding: 10px;
    width: 228px;
    height: 228px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    overflow: hidden; 
    background: green;
}

article:hover:after
{ 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 322px; 
    height: 322px; 
    background: #fff;
    -webkit-transform: translate(-161px, -161px) rotate(135deg); 
    -moz-transform: translate(-161px, -161px) rotate(135deg); 
    transform: matrix(-161px, -161px) rotate(135deg); 
    opacity: 0.5; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out;
}

JSFiddle

Upvotes: 1

Views: 3195

Answers (1)

Chad
Chad

Reputation: 5428

Your element won't transform or move if you don't have a start and end point. What you want to do is set your article:after first, and then also set what it should be when you hover over the article. Something like this: http://jsfiddle.net/E8dNe/1/

article:after { 
    content: '×'; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 322px; 
    height: 322px; 
    background: #fff;
    opacity: 0; 
    -webkit-transition: 1s all ease-in-out; 
}

article:hover:after {    
    -webkit-transform: translate(-161px, -161px) rotate(135deg); 
    opacity: .5;
}

Upvotes: 5

Related Questions