[animation] 간단한 애니메이션 효과

<div class="box">
  <a href=""></a>
</div>

.box{position:relative; width:260px; height:300px; background-color:orangered;/*background:url(이미지 주소) no-repeat;*/}
.box:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,.6); /*background:url(이미지 주소) no-repeat;*/ opacity:0; transition:0.5s all;}
.box:after{content:"+"; position:absolute; bottom:20px;  left:50%; transform:translateX(-50%); width:40px; height:40px; line-height:40px;  background:black; color:#fff; font-size:20px; border-radius:50%; text-align:center; transition:0.5s all;}
.box:hover:after{content:"+"; bottom:100px; background:yellow;}
.box:hover:before{content:""; opacity:1;}
.box a{position:absolute; left:0; top:0; width:100%; height:100%;}

주황색 네모 박스에 마우스 오버했을 때

배경이 어두워 지면서 동그라미+가 위로 올라오며 배경색이 변함.

 

opacity가 있는 배경은 .box:before / 

동그라미 + 는 .box:after로 만들어서 hover 했을 때 bottom:100px이 되게 함. 

transition:0.5s all; 을 사용하여 부드럽게 이동하게 하였으며,

가상클래스를 사용하여 html구조를 단순하게 하였다.