image hover transition in out

1#cf {
2  position:relative;
3  height:281px;
4  width:450px;
5  margin:0 auto;
6}
7
8#cf img {
9  position:absolute;
10  left:0;
11  -webkit-transition: opacity 1s ease-in-out;
12  -moz-transition: opacity 1s ease-in-out;
13  -o-transition: opacity 1s ease-in-out;
14  transition: opacity 1s ease-in-out;
15}
16
17#cf img.top:hover {
18  opacity:0;
19}

1/* Simple CSS color transition effect on selector */
2
3div {
4	color: white;
5  	background-color: black; 
6}
7
8div:hover {
9	background-color: red;
10}
11
12
13/* Additional transition effects on selector */
14
15div {
16	background-color: black;
17  	color: white;
18  	height: 100px;
19  	transition: width 1.5s, height 3s;
20  	width: 100px;
21  	
22}
23
24div:hover {
25	background-color: red;
26  	height: 300px;	
27  	width: 150px;
28}
29