时间戳

首页 > 解决方案 > 如何将此项目转换为代码？

html - 如何将此项目转换为代码？

问题描述

这是我的 css 和 html 代码：

我的目标是创建一个我在图像中指定的框

.stone-item{
    width: 330px;
    transition: all .2s ease-in-out;
    -webkit-transition:  all .2s ease-in-out;
    -moz-transition:  all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    position: relative;
    margin: 0;
}
.stone-item img{
    width: 330px;
    height: 220px;
}
.stone-item .stone-content{
    transition: all .2s ease-in-out;
    -webkit-transition:  all .2s ease-in-out;
    -moz-transition:  all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    position: absolute;
    bottom: -50%;
    left: 0;
    background: aqua;
}
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="css.css">
</head>
    <body>

<div class="stone-item">
    <a href="#"><img src="" alt=""></a>
    <div class="stone-content">
        <h4> </h4>
    </div>
</div>
</body>

</html>

问题出在哪里？为什么不起作用？？？？

我想要的输出：

悬停前

after ： 鼠标悬停后

标签： htmlcss

解决方案

这是你的代码。

HTML

<!doctype html>
<html>

  <head>
    <link rel="stylesheet" href="css.css">
  </head>

  <body>

    <div class="stone-item">
      <a href="#"><img src="https://i.stack.imgur.com/SjIvg.png" alt=""></a>
      <div class="stone-content">
        <h4>adsfasdf</h4>
        <p>
          Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
        </p>
      </div>
    </div>
  </body>

</html>

CSS

.stone-item {
  width: 330px;
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  position: relative;
  margin: 0;
  overflow: hidden;
}

.stone-item img {
  width: 330px;
  height: 220px;
}

.stone-item .stone-content {
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  position: absolute;
  bottom: calc(110px - 100%);
  left: 0;
  background: rgba(0, 255, 255, 0.6);
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.stone-item .stone-content h4 {
  margin: 0;
}

.stone-item:hover .stone-content {
  bottom: 0;
}

推荐阅读