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，了解其运作方式。

当悬停父div时，使图像或div向上或向下滑动

1 个答案: