Question

我在div中的锚标签中有三个图像。我正在使用CSS过渡使它看起来很漂亮。我希望图像居中，我通过使用float：inline实现这一点;但是，当我使用除左或右之外的任何东西时，过渡停止工作

这是CSS

.previousvideos img {
    float: inline;
    margin-top: 15px;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
    -webkit-transition: margin 0.5s ease-out;
}
.previousvideos img:hover {
    margin-top: 2px;
}

这是HTML / PHP

<div class="previousvideos">
<a href="<?php echo "http://www.youtube.com/watch?v={$latestvideo[1]['videoID']}"; ?>">
    <img src="<?php echo $latestvideo[1]['thumbnail']; ?>" width="300" height="169">
</a>
<a href="<?php echo "http://www.youtube.com/watch?v={$latestvideo[2]['videoID']}"; ?>">
    <img src="<?php echo $latestvideo[2]['thumbnail']; ?>" width="300" height="169">
</a>
<a href="<?php echo "http://www.youtube.com/watch?v={$latestvideo[3]['videoID']}"; ?>">
    <img src="<?php echo $latestvideo[3]['thumbnail']; ?>" width="300" height="169">
</a>
</div>

Answer 1

如果您正在寻找this，那么它对我有用。

<强> CSS

.previousvideos img {
    float: left;
    margin-top: 15px;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
    -webkit-transition: margin 0.5s ease-out;
}
.previousvideos img:hover {
    margin-top: 20px;
}

修改

Updated Fiddle

CSS过渡属性

1 个答案:

修改