如何将此项目转换为代码?

Posted

技术标签:

【中文标题】如何将此项目转换为代码?【英文标题】: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="" ></a>
    <div class="stone-content">
        <h4> </h4>
    </div>
</div>
</body>

</html>

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

我想要的输出:

before hover

之后: after mouse hover

【问题讨论】:

到目前为止你有什么? 请回来查看。发布更新 【参考方案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" ></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;

【讨论】:

以上是关于如何将此项目转换为代码?的主要内容,如果未能解决你的问题,请参考以下文章

如何将此 Java 代码转换为 kotlin 代码

如何将此 NSClassFromString 代码转换为 Swift?

如何将此代码转换为 PyQt5?

如何将此.XAML代码转换为C#代码

如何将此代码转换为 for 循环格式?

如何将此 foreach 代码转换为 Parallel.ForEach?