- oder etwas in diesem Sinne

Question

Ich habe eine hier codepen erstellt:

https://codepen.io/aabarker/pen/WjQMjW

Erstes Bild: das Originalbild. Wenn Sie den Mauszeiger darüber bewegen, ändert sich dies. Zweites Bild: Mein Versuch, das CSS zu bearbeiten. Drittes Bild: Ich versuche, den roten Balken von diesem dritten Bild oben auf das zweite Bild zu setzen - sowohl das Original als auch den Schwebeflug.

Ich versuchte mit einer Grenze, aber es hat nicht sehr gut funktioniert und ich habe keine Ideen mehr. Ich bin sehr interessiert zu sehen, wie es gemacht wird, wenn es gemacht werden kann.

Der rote Balken sollte über das Bild und nicht über das obere Bild gehen.

Danke.

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

Answer 1

ein div mit position:absolute Verwenden Sie Ihren Text

.container{ 
 
    position:relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: black; 
 
} 
 

 
.text{ 
 
    width: 100%; 
 
    position:absolute; 
 
    background-color:red; 
 
    top:0px; 
 
    left:0px; 
 
} 
 

 
p { 
 
    text-align: center; 
 
    padding:5px; 
 
    margin:0px; 
 
}

<div class=container> 
 
    <div class=text> 
 
     <p> HELLO </p> 
 
    </div> 
 
    
 
</div>