Text hinter div/image

Ich möchte nur einen Text hinter 3 Bildern haben. Diese 3 Bilder sollten nebeneinander (in einer Reihe) sein und wenn ich schweben, sollten sie sich drehen und der Text dahinter erscheint.Text hinter div/image

Jetzt habe ich das Problem, dass ich miteinander jene 3 divs nächsten cant get (aber der Text hinter den Bildern :))

Html:

<div id="teamContent"> 
    <div class="teamMember"> 
     <h3>name</h3> 
     <h4>job</h4> 
     <img src="images/team.jpg" alt="teamImage"/> 
    </div> 
    <div class="teamMember"> 
     <h3>name</h3> 
     <h4>job</h4> 
     <img src="images/team.jpg" alt="teamImage"/> 
    </div> 
    <div class="teamMember"> 
     <h3>name</h3> 
     <h4>job</h4> 
     <img src="images/team.jpg" alt="teamImage"/> 
    </div> 
</div>

SCSS:

#teamContent{ 
    display: inline-block; 
    text-align: center; 
    .teamMember{ 
     width: 30%; 
     display: inline-block; 
     position: relative; 
     margin: 20px; 
     img{ 
      max-width: 100%; 
      margin: 0; 
      position: absolute; 
      top: 0; 
      left: 0; 
     } 
    } 
}

versucht, eine Geige zu tun: https://jsfiddle.net/2k2dvhv0/

Quelle

2017-03-03 Markus G.

der beste Weg, die Verwendung Schwimmer nicht ist gesetzt zu positionieren, flex ist besser, es gibt eine Hilfe:

<div id="teamContent"> 
    <div class="teamMember"> 
     <img src="https://placehold.it/150x150" alt="teamImage"> 
     <div class="data"> 
      <h3>name</h3> 
      <h4>job</h4> 
     </div> 
    </div> 
    <div class="teamMember"> 
     <img src="https://placehold.it/150x150" alt="teamImage"/>  
     <div class="data"> 
     <h3>name</h3> 
     <h4>job</h4> 
     </div> 
    </div> 
    <div class="teamMember"> 
     <img src="https://placehold.it/150x150" alt="teamImage"/> 
     <div class="data"> 
     <h3>name</h3> 
     <h4>job</h4> 
     </div> 
    </div> 
</div> 

#teamContent { 
    display: flex; 
    justify-content: space-around; 
} 
.teamMember { 
    text-align: center; 
} 
.data { 
    opacity: 0; 
    transition: opacity 0.5s; 
} 
.teamMember:hover .data { 
    opacity: 1; 
} 
.teamMember img { 
    transition: transform 0.5s; 
} 
.teamMember:hover img { 
    transform: rotate(90deg); 
}

https://jsfiddle.net/z9Lh7aqs/

Quelle

2017-03-03 23:47:42 Paul

Danke, müssen nur ad d dass der Text wirklich hinter dem Bild liegt und nur bei mouseover erscheint –