후버 이펙트

 

view demo    download

 

 

CSS3를 이용한 후버 이펙트(hover effect) 를 만들어 보겠습니다.

 

The HTML

 

HTML의 구조는 아주 간단합니다. view 안에는 이미지 요소와 클래스 'mask'가 있습니다. 'mask'는 CSS3로 이펙트를 담당하게 될 중요한 요소입니다. 그리고 'mask' 안에 다시 타이틀과 텍스트, Read More 링크가 들어갑니다.

<div class="view">  
     <img src="image.gif" />  
     <div class="mask">  
     <h2>타이틀</h2> 
     <p>텍스트</p>  
         <a href="#" class="info">Read More</a>  
     </div>  
</div>
			  

 

The CSS

 

우선 4가지 후버 이펙트에 공통적으로 들어가는 기본 css3를 만듭니다.

.view { 
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: url(../images/bgimg.jpg) #fff no-repeat;
}
.view .mask, 
.view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.view img {
    display: block;
    position: relative;
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8); 
    margin: 20px 0 0 0;
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center;
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000;
}
.view a.info:hover {
    box-shadow: 0 0 5px #000;
}
			  

 

Demo 1

 

HTML에서 각각의 데모마다 데모 번호에 맞춰 view-first, view-second, ... 식으로 고유의 클래스가 부여됩니다.

<div class="view view-first">  
     <!-- ... -->  
</div>  
			 

 

데모 1은 기본적인 CSS transition과 transform을 이용한 후버 이펙트 입니다. 타이틀에는 translateY를 -100을 주고 텍스트에는 100을 줘서 마우스를 올렸을 경우 각각 위와 아래에서 내려오고 올라오는 애니메이션을 줍니다.

.view-first img { 
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(219,127,8, 0.7); 
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p { 
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
} 
			 

 

텍스트와 링크버튼에 transition-delay를 각각 다르게 줘 시간차를 두고 나타나도록 합니다.

           
.view-first:hover img { 
    transform: scale(1.1);
} 
.view-first:hover .mask { 
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}             
             

 

Demo 2

 

mask 바탕에도 이펙트를 주기 위해 비워두고, 대신 content를 추가하여 요소들을 감쌉니다.

<div class="view view-second">
    <img src="images/5.jpg" />
    <div class="mask"></div>
    <div class="content">
        <h2>타이틀</h2>
        <p>텍스트</p>
        <a href="#" class="info">Read More</a>
    </div>
</div>  
			 

 

mask에 translate와 rotate 값을 줘서 바탕색 이펙트 효과를 줍니다. 다른 요소들도 데모 1과 마찬가지로 비슷한 이펙트 효과를 줍니다.

.view-second img {  
    transition: all 0.2s ease-in;
}
.view-second .mask { 
    background-color: rgba(115,146,184, 0.7); 
    width: 300px;
    padding: 60px;
    height: 300px;
    opacity: 0;
    transform: translate(265px, 145px) rotate(45deg);
    transition: all 0.2s ease-in-out;
}
.view-second h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: translate(200px, -200px);
    transition: all 0.2s ease-in-out;
}
.view-second p { 
    transform: translate(-200px, 200px);
    transition: all 0.2s ease-in-out;
}
.view-second a.info { 
    transform: translate(0px, 100px);
    transition: all 0.2s 0.1s ease-in-out;
}         
.view-second:hover .mask { 
    opacity:1; 
    transform: translate(-80px, -125px) rotate(45deg);
}                             
.view-second:hover h2 { 
    transform: translate(0px,0px);
    transition-delay: 0.3s; 
}
.view-second:hover p { 
    transform: translate(0px,0px); 
    transition-delay: 0.4s;
}
.view-second:hover a.info { 
    transform: translate(0px,0px); 
    transition-delay: 0.5s;
}             
             

 

Demo 3

 

데모 3은 왼쪽 밖에서부터 요소들이 들어오는 이펙트 입니다.

.view-third img {
    transition: all 0.3s ease-in-out; 
}
.view-third .mask { 
    background-color: rgba(146,96,91,0.3);
    transform: translateX(-300px);
    opacity: 1;
    transition: all 0.4s ease-in-out; 
}
.view-third h2{
    background: rgba(255, 255, 
    	255, 0.5);
    color: #000;
    box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-third p{
    opacity: 0;
    color: #333;
    transition: all 0.2s linear;
}
.view-third:hover .mask { 
    transform: translateX(0px);
}                       
.view-third:hover img { 
    transform: translateX(300px);
    transition-delay: 0.1s;
}
.view-third:hover p{
    opacity: 1;
    transition-delay: 0.4s;
}             
             

 

Demo 4

 

데모 4는 이미지가 줌인 되면서 사라지고, 동시에 텍스트와 링크가 나타나는 이펙트 입니다.

.view-fourth img { 
    transform: scaleY(1);
    transition: all 0.7s ease-in-out;
}
.view-fourth .mask { 
    background-color: rgba(255,
        231, 179, 0.3); 
    transition: all 0.5s linear;
    opacity: 0;
}   
.view-fourth h2{
    border-bottom: 1px solid 
    	rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    opacity: 0;
}
.view-fourth p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}
.view-fourth a.info { 
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}
.view-fourth:hover img { 
    transform: scale(10);
    opacity: 0;
}
.view-fourth:hover .mask { 
    opacity: 1;
}                                                                            
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{ 
    transform: scale(1);
    opacity: 1;
}             
             

 

view demo    download