css3로 제작가능한 호버효과 : happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 기타효과 > css3로 제작가능한 호버효과 상세정보

클라우드태그

javascript

HTML

PHP

2022

Api

CSS

웹메일

jquery

ASP

쇼핑몰

mysql

갤러리

mobile

현재접속자 명

css3로 제작가능한 호버효과

해피팀

네티즌

소스분류

기타효과

다운로드 횟수

597 회

간단설명

css3를 이용하여 이미지에 이펙트 호버 효과를 줄 수 있습니다.

평가하기

css3을 이용하여 이미지에 호버이펙트를 다양하게 사용할 수 있습니다.

마우스올렸을때

제각각 다른 효과를 미리보기로 확인할 수 있습니다.

기본구조

<div class="grid"> 
  
    <figure class="effect-lily"> 
        <img src="img/1.jpg" alt="img01"/> 
        <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
            <a href="#">View more</a> 
        </figcaption>          
    </figure> 
  
    <!-- ... -->
      
</div>

사용 css3

figure.effect-sadie figcaption::before { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); 
    content: ''; 
    opacity: 0; 
    transform: translate3d(0,50%,0); 
} 
  
figure.effect-sadie h2 { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    width: 100%; 
    color: #484c61; 
    transition: transform 0.35s, color 0.35s; 
    transform: translate3d(0,-50%,0); 
} 
  
figure.effect-sadie figcaption::before, 
figure.effect-sadie p { 
    transition: opacity 0.35s, transform 0.35s; 
} 
  
figure.effect-sadie p { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    padding: 2em; 
    width: 100%; 
    opacity: 0; 
    transform: translate3d(0,10px,0); 
} 
  
figure.effect-sadie:hover h2 { 
    color: #fff; 
    transform: translate3d(0,-50%,0) translate3d(0,-40px,0); 
} 
  
figure.effect-sadie:hover figcaption::before , 
figure.effect-sadie:hover p { 
    opacity: 1; 
    transform: translate3d(0,0,0); 
}