css 我如何显示文本从底部悬停？

9rygscc1 于 2023-02-01 发布在其他

关注(0)|答案(2)|浏览(183)

我想不出如何固定文本的第一部分，并使其从底部显示
左边是从底部滑动的悬停，右边是它开始时的样子
我把我试图使用的代码里面-请看看谢谢！

.container {
  padding: 1em 0;
  float: left;
  width: 50%;
}
.image1 {
  display: block;
  width: 100%;
  height: auto;
  transition: all 0.5s ease;
  opacity: 1;
  backface-visibility: hidden;
}

.middle {
  background: rgb(30, 30, 36);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: rgb(246, 244, 234);
  margin: 0px;
}
.middle:hover {
  transition: all 0.3s ease-in-out 0s;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.product-box {
  overflow: hidden;
}

.product-box:hover img {
  transform: scale(1.04);
  transition: all 0.8s linear;
}

.product-box:hover {
  background: rgba(30, 30, 36, 0.6) !important;
}

.product-box:hover .image1 {
  opacity: 0.5;
  background: transparent;
}

.product-box:hover .middle {
  opacity: 1;
}
.fadeIn-bottom {
  top: 80%;
}

<div class="container">
  <div class="product-box fadeIn-bottom" style="margin-top: 20px;">

    <img src="https://phpmysqlappdiag454.blob.core.windows.net/blob/assets/images/hotelkos/Rectangle 14.png" alt="" data-filename="1.png" style="width: 100%; height: auto; margin-bottom: -40px;" class="image1">

    <div class="middle ">

      <p style="color: #F6F4EA;">Suites</p>

    </div>
    <div>
    </div>

css

来源：https://stackoverflow.com/questions/75278239/how-can-i-show-text-from-the-bottom-on-hover

2条答案

按热度按时间

des4xlb01#

你需要做的是把相对的，即product-box放在一个relative position中，然后把absolute position设置为你想要应用过渡的"标题"。一旦完成了这一步，你需要知道如何使用过渡和绝对位置是如何工作的。这两件事足够重要，可以制作一些很酷很简单的动画，所以我建议你去看看。

.product-box {
  position: relative;
}

.image1 {
  width: 100%;
  height: 100%;
 }
 
.title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .5);
  color: white;
  transition: all .5s;
}

.product-box:hover .title {
  top: 0;
 }

<div class="container">
  <div class="product-box">
    <div class="title">
      <h4>Suites</h4>
    </div>
    <img src="https://phpmysqlappdiag454.blob.core.windows.net/blob/assets/images/hotelkos/Rectangle 14.png" alt="" data-filename="1.png" class="image1">
  <div>
</div>

赞(0）回复(0）举报 2023-02-01

j2cgzkjk2#

我想这就是你想要的

.container {
  width: 50%;
}

.image1 {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: all 0.5s ease;
  opacity: 1;
}

.product-box {
  display: flex;
  position: relative;
}

.middle {
  position: absolute;
  width: 100%;
  color: #F6F4EA;
  background: rgb(30, 30, 36);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  margin: 0px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: sans-serif;
  display: flex;
  bottom: 0;
  justify-content: center;
  align-items: center;
}

.product-box:hover {
  transform: scale(1.04);
  transition: all 0.8s linear;
}

.product-box:hover .middle {
  opacity: 0.8;
  height: 100%;
  padding: 0;
}

<div class="container">
  <div class="product-box">
    <img src="https://phpmysqlappdiag454.blob.core.windows.net/blob/assets/images/hotelkos/Rectangle 14.png" alt="" class="image1">
    <div class="middle">Suites</div>
  </div>
</div>

赞(0）回复(0）举报 2023-02-01

我来回答

css 我如何显示文本从底部悬停？

2条答案

相关问题

热门标签

最新问答