当悬停父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;
}

在小提琴中,框中没有图像显示.但是,通常会有.在悬停时,框会更改背景颜色,字体颜色,并且只要有图像,图像不透明度.没关系.

现在,我想这样做,在悬停时,图像或div从底部/侧面/顶部"滑动",表示"Visit this website"可能带有某种图标.

什么是最好的方法？我一直在考虑它,但我无法想出解决方案.

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