html - 悬停父div时使图像或div向上或向下滑动

Question

我目前有这个 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;
}

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

现在，我想让它在悬停时，图像或 div 从底部/侧面/顶部“滑动”，上面写着 “访问此网站”，可能还有一些某种图标。

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

Answer 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看看它是如何工作的。