[CSS] hover시 부드러운 효과

HTML

	
	
	
	

		
1
	
 

css

.item{position:relative;overflow:hidden;width:150px;height:150px;background:#fff;border:1px solid #ccc;text-align:center;border-radius:50%;cursor:pointer;}
 .item .num{padding-top:50px;}
.item .desc{opacity:0;position:absolute;left:0;top:0;bottom:0; z-index:10; width:100%;color:#fff; background-color:rgba(0,0,0,.6); transition:all .2s;}
.item:hover .desc {opacity:1;}
.item .desc p {position:relative; transition:all .3s;top:8px;}
.item:hover .desc p {top:0;}

예제

1