css - CSS3 Fade In Before/After Content -

i have following hover effect, how make fade in , 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

your element won't transform or move if don't have start , end point. want set article:after first, , set should when hover on article. 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 ease-in-out;  }  article:hover:after {         -webkit-transform: translate(-161px, -161px) rotate(135deg);      opacity: .5; }