悬停父 div 时使图像或 div 向上或向下滑动答案

【问题标题】：Make image or div slide up or down when hovering parent div悬停父 div 时使图像或 div 向上或向下滑动
【发布时间】：2013-12-02 06:52:34
【问题描述】：

我目前有这个JSfiddle。

HTML：

    <div class="refTable">
    <div class="refRow">
        <div class="refCell"><img src="images/test.jpg" /><p>Test 1</p></div>
        <div class="refSep"></div>
        <div class="refCell"><img src="images/test.jpg" /><p>Test 2</p></div>
        <div class="refSep"></div>
        <div class="refCell"><img src="images/test.jpg" /><p>Test 3</p></div>
    </div>
</div>

CSS：

.refTable {
    display:table;
    max-width:919px;
    width:100%;
    margin:0px auto;
}
.refRow {
    display:table-row;
}
.refCell {
    display:table-cell;
    width:291px;
    text-align: center;
    font-size:16px;
    border:1px #ffffff solid;
    padding:0px 0px 10px 0px;
    background:#eaeaea;
    color:#333333;
    -webkit-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
    resize: none;
    outline:0;
    transition-duration: 0.2s;
}
.refCell img {
    -webkit-border-radius: 20px 20px 0px 0px;
    border-radius: 20px 20px 0px 0px;
    padding-bottom:5px;
}
.refCell p {
    line-height: 20px;
}    
.refCell:hover {
    border-color:#b32f01;
    background:#ffffff;
    -webkit-transition: color background 0.2s ease-in-out;
    -moz-transition: color background 0.2s ease-in-out;
    -ms-transition: color background -0.8s ease-in-out;
    -o-transition: color background 0.2s ease-in-out;
    transition: color background 0.2s ease-in-out;
    cursor:pointer;
    color:#cacaca;
}
.refCell:hover img {
    opacity:0.4;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity -0.8s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}
.refSep {
    display:table-cell;
    width:20px;
}

在小提琴中，框中没有显示图像。但是，通常会有。悬停时，框会更改背景颜色、字体颜色，并且如果有图像，则图像不透明度。没关系。

现在，我想让它在悬停时从底部/侧面/顶部“滑动”上显示"Visit this website"，可能带有某种图标。

最好的方法是什么？我真的一直在考虑，但我想不出一个解决方案。

【问题讨论】：

标签： html css hover

【解决方案1】：

我只使用了 css :hover 和 css3 转换。

这是我写的css，

.info {
  position: absolute;
  top: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  -webkit-transition: top 0.6s ease-in-out;
  left: 0;
  color: #f7f7f7;
  text-decoration: none;
}

.refCell:hover .info {
  top: 0;
  display: block;
}

我也将此添加到 .refCell 类中，

position: relative;
overflow: hidden;

我添加的html，

<span class="info">Click to view website</span>

这里是JSFIDDLE，看看它是如何工作的。

【讨论】：

工作就像一个魅力 :) 非常感谢！