标题边框也出现在图片下方。(css3)

Question

​

.top {
  height: 500px;
  width: 100%;
  border: orange 25px outset;
  margin-top: 20px;
  margin-bottom: 20px;
}
.demo-2 {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.demo-2 p,
.demo-2 h2 {
  color: black;
  padding: 10px;
  left: -20px;
  top: 20px;
  position: relative
}
.demo-2 p {
  font-family: 'American captain';
  font-size: 12px;
  line-height: 18px;
  margin: 0
}
.demo-2 h2 {
  font-size: 20px;
  line-height: 24px;
  margin: 0;
  font-family: 'American captain'
}
.effect img {
  position: absolute;
  left: 0;
  bottom: 0;
  cursor: pointer;
  margin: -12px 0;
  -webkit-transition: bottom .3s ease-in-out;
  -moz-transition: bottom .3s ease-in-out;
  -o-transition: bottom .3s ease-in-out;
  transition: bottom .3s ease-in-out
}
.effect img.top:hover {
  bottom: -96px;
  padding-top: 100px
}
h2.zero,
p.zero {
  margin: 0;
  padding: 0
}

<div class="top">
  <img src="https://i.kinja-img.com/gawker-media/image/upload/qmybkmtqtg88gzoyltt1.jpg" alt="A Sam Hawkz Production" style="width:100%;height: 450px;">
</div>

<ul class="demo-2 effect">
  <li>
    <h2 class="zero">This is a cool title!</h2>
    <p class="zero">Lorem ipsum dolor sit amet.</p>
  </li>
  <li>
    <img class="top" src="http://casuallyhardcore.com/wp-content/uploads/2012/01/hardcore-gamer.jpg" alt="" />
  </li>
</ul>

​

'top‘类用于我想要边框的第一个图像，而'demo-2’类用于边框即将出现的第二个图像，但我不希望这样。我看过很多次这段代码，但在demo-2类中没有任何边框属性。

。任何帮助都将不胜感激。提前谢谢。:)

Answer 1

您正在为div和img标记使用相同的类.top。

.top {
  height: 500px;
  width: 100%;
  border: orange 25px outset;
  margin-top: 20px;
  margin-bottom: 20px;
}

更改为

.top {
  height: 500px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

div.top {
   border: orange 25px outset;
}

Answer 2

删除第二个图像的class="top"，如下所示

 <pre>
 <li>
    <img src="http://casuallyhardcore.com/wp-content/uploads/2012/01/hardcore-gamer.jpg" alt="" />
  </li>
</pre>

Answer 3

从第二个图像中删除顶级类，并为其定义一个新类。

<div class="top">
  <img src="https://i.kinja-img.com/gawker-media/image/upload/qmybkmtqtg88gzoyltt1.jpg" alt="A Sam Hawkz Production" style="width:100%;height: 450px;">
</div>

<ul class="demo-2 effect">
  <li>
    <h2 class="zero">This is a cool title!</h2>
    <p class="zero">Lorem ipsum dolor sit amet.</p>
  </li>
  <li>
    <img src="http://casuallyhardcore.com/wp-content/uploads/2012/01/hardcore-gamer.jpg" alt="" />
  </li>
</ul>