如何将此项目转换为代码？答案

【问题标题】：How to convert this item into code?如何将此项目转换为代码？
【发布时间】：2018-11-20 02:30:40
【问题描述】：

这是我的 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>

问题出在哪里？为什么不行？？？？？？

我想要的输出：

before hover

之后： after mouse hover

【问题讨论】：

到目前为止你有什么？
请回来查看。发布更新

标签： html css

【解决方案1】：

这是您的代码。

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;
}

【讨论】：