主页 / 问题 / 851724
Accepted
Сергій mk
Asked:2020-07-08 20:15:29 +0800 CST2020-07-08 20:15:29 +0800 CST

悬停在图像悬停上

  • 772

悬停在图像上时如何制作这样的悬停效果？

徘徊

css3

1 个回答

  1. Best Answer

    如果我正确理解您的问题，则消息底部是一个代码，可让您更改悬停时块的显示。内部元素在其初始状态下被绝对定位和隐藏：

    position: absolute;
width: 100%;
height: 100%;
top: 100%;

    然后，当悬停在父块上时，元素的位置变为：

    top: 0;

    隐藏块中的内容使用flexbox垂直和水平居中。

    .item {
  font-family: Arial;
}

.item_child {
  position: relative;
  width: 350px;
  height: 150px;
  overflow: hidden;
}

.item_child-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  transition:top .3s linear;
  background-image: url(https://loremflickr.com/320/240);
  background-size: cover;
  background-repeat:no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item_child:hover .item_child-inner {
  top: 0;
}

.item_child-inner a {
  color: white;
  text-decoration: none;
    <div class="item">
  <div class="item_child">
  <img src="http://via.placeholder.com/350x150">
    <div class="item_child-inner">
      <a href="#">view more</a>
    </div>
  </div>
</div>

    • 1

相关问题