仅使用CSS和HTML来提升Div的悬停效果

Question

我试图在一个div上实现悬停效果，使包含图像的div在悬停时向上移动。 我希望“拍立得”div在悬停时向上移动。 如果我只将悬停类应用于img，则该效果有效，但不适用于整个div。 请帮忙解决。 Fiddle here

Markup:

<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;
}

- user2725936

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;
}

Living example: http://jsfiddle.net/txgvh/2/

- Alvaro

---

请注意，动画效果在Internet Explorer 9或更低版本以及一些不支持CSS 3的其他浏览器中无法正常工作。 - Alvaro