Html 在div的边框中添加单词-或类似的内容

我在这里创建了一个代码笔：

第一个图像：原始图像。当你将鼠标悬停在它上面时，它会改变。 第二张图片：我试图编辑CSS。 第三张图片：我试图将第三张图片中的红色条放在seocond图片的顶部-原始图片和悬停图片

我试过使用边界，但效果不太好，我也没有主意了。如果可以的话，我很想看看是怎么做的

红色条应位于图像顶部，而不是图像顶部

谢谢

<!-- unedited original -->    
<div class="bord crossfd">

    <img src="http://stagehypnosisuniversity.com/wp-content/uploads/2017/03/35o-min.jpg" style="width: 300px;"></img>
    </div>
<!-- end of unedited original -->

<!-- my attempt -->
<div class="bord2 crossfd2">
    <h3 style="margin-top:-30px">Chapter 31</h3>  
  <img src="http://stagehypnosisuniversity.com/wp-content/uploads/2017/03/35o-min.jpg" style="width: 300px;"></img>
    </div>
<!-- end of my attempt -->

<!-- what I'm trying to achieve -->
  <div class="inline">
    <img src="http://stagehypnosisuniversity.com/wp-content/uploads/2017/04/Untitled-3.jpg" style="width: 300px;"></img>
    </div>
<!-- end -->

/* CSS for original */

.bord{
padding: 0;
margin: 0;
}

.crossfd{
background: url("http://stagehypnosisuniversity.com/wp-content/uploads/2017/03/35t-min.jpg");
background-repeat:no-repeat;
background-size:contain;
background-position:center;
display: inline-block;
font:size: 0;
}

.inline{
  display: inline-block;
}

.crossfd img{
-webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

.crossfd img:hover{
opacity: 0;
}

/* end of CSS for original */

/* My attempt by adding a border*/

.bord2{
padding: 0;
margin: 0;
border-style: solid;
border-color: #CA3537;
border-width: 33px 0 0 0;
}

.crossfd2{
background: url("http://stagehypnosisuniversity.com/wp-content/uploads/2017/03/35t-min.jpg");
background-repeat:no-repeat;
background-size:contain;
background-position:center;
display: inline-block;
font:size: 0;
}

.crossfd2 img{
-webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

.crossfd2 img:hover{
opacity: 0;
}

第31章
/*原版CSS*/
伯德先生{
填充：0；
保证金：0；
}
.crossfd{
背景：url（“http://stagehypnosisuniversity.com/wp-content/uploads/2017/03/35t-min.jpg");
背景重复：无重复；
背景尺寸：包含；
背景位置：中心；
显示：内联块；
字体：大小：0；
}
.内联{
显示：内联块；
}
.crossfd img{
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
}
.crossfd img：悬停{
不透明度：0；
}
/*原版CSS结束*/
/*添加边框的尝试*/
bord2先生{
填充：0；
保证金：0；
边框样式：实心；
边框颜色：#CA3537；
边框宽度：33px 0；
}
.crossfd2{
背景：url（“http://stagehypnosisuniversity.com/wp-content/uploads/2017/03/35t-min.jpg");
背景重复：无重复；
背景尺寸：包含；
背景位置：中心；
显示：内联块；
字体：大小：0；
}
.交叉FD2 img{
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
}
.crossfd2 img：悬停{
不透明度：0；
}

使用带有

位置：绝对值的div插入文本


.container{
位置：相对位置；
宽度：200px；
高度：200px；
背景：黑色；
}
.文本{
宽度：100%；
位置：绝对位置；
背景色：红色；
顶部：0px；
左：0px；
}
p{
文本对齐：居中；
填充物：5px；
边际：0px；
}

你好

通过“第三张图像”，您指的是带有视频的图像吗？还有什么红条？“第31章70分钟”的那个？你问的问题让人很困惑