div에 css 및 html로만 Burb Up 호버 효과 적용

Question

div에 호버 효과를 적용하여 이미지가 포함 된 div가 호버로 이동하도록합니다. 나는 "폴라로이드"div를 가리 키기를 원합니다. 이 효과는 내가 hover 클래스를 img에만 적용하고 전체 div는 적용하지 않으면 작동합니다. 도와주세요. 바이올린 here

마크 업 :

<div id="home-gal-col"> <span class="span-homegal"> 
    <a href="/listings/category/accessories/"> 
     <div class="polaroid"> 
      <img src="/images/homegal/picture.jpg"> 
      <p>picture</p> 
      </img> 
     </div> 
    </a> 
    </span> 
</div> 

CSS는 :

#home-gal-col { 
width:15%; 
float:left; 
padding:5px; 
} 

.polaroid { 
border: 10px solid #fff; 
border-bottom: 15px solid #fff; 
-webkit-box-shadow: 3px 3px 3px #777; 
-moz-box-shadow: 3px 3px 3px #777; 
box-shadow: 3px 3px 3px #777; 
} 

.polaroid img { 
margin: 0 auto; 
width: 100%; 
} 

.polaroid p { 
text-align: center; 
color: #D51386; 
} 

.span-homegal a { 
-webkit-transition: margin 0.2s ease-out; 
-moz-transition: margin 0.2s ease-out; 
-o-transition: margin 0.2s ease-out; 
} 

.span-homegal a:hover { 
margin-bottom: 5px; 
} 

Answer 1

이것이 당신이 찾고있는 무엇인가?

.polaroid:hover{ 
    margin-top: -10px;  
} 

당신은 또한 .polaoid 클래스에 transition 속성을 부가 CSS 3 애니메이션을 추가 할 수 있습니다

:

.polaroid { 
    border: 10px solid #fff; 
    border-bottom: 15px solid #fff; 
    -webkit-box-shadow: 3px 3px 3px #777; 
    -moz-box-shadow: 3px 3px 3px #777; 
    box-shadow: 3px 3px 3px #777; 

    -webkit-transition: margin 0.2s ease-out; 
    -moz-transition: margin 0.2s ease-out; 
    -o-transition: margin 0.2s ease-out; 
    transition: margin 0.2s ease-out; 
} 

생활 예 : http://jsfiddle.net/txgvh/2/