html - 标题边框也出现在图像下方。 (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 类中都没有 border 属性。 .任何帮助将不胜感激。提前致谢。 :)

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