标题边框也出现在图像下方。 （CSS3）

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃39; top＆＃39; class是我想要边框的第一张图片和＆＃39; demo-2＆＃39; class是第二张图片，边框来了，但我不想要。我看了很多次代码但是在任何demo-2类中都没有border属性。 。任何帮助将受到高度赞赏。提前致谢。 ：）

Answer 1

您对.top和div代码使用相同的班级img。

.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>