elemnt: Hover - Text und Hintergrund

Question

Ich brauche Text auf dem Bild angezeigt werden, sobald Sie es schweben, und auch ich brauche es, um die Deckkraft zu beeinflussen.

einen Blick auf diesen Stift haben http://codepen.io/anon/pen/NNBgbQ

<div class="flex-menu"> 
<div class="menu-container"> 
<img class="menu-image" src="http://www.libbyroach.ca/wp-content/uploads/2014/11/Adams-Sandwich.jpg" alt="Sandwitch"> 
<div class="menu-description"> 

<h4>Sandwitch</h4> 
<p>Powder marshmallow marshmallow brownie carrot cake candy bonbon. Sweet sugar plum gummies caramels tart carrot cake tiramisu cheesecake. Cheesecake biscuit jelly beans. Jelly-o icing chocolate macaroon. </p> 
</div> 
</div> 
</div> 

Das Ergebnis ich suche:

Hover über, ändert sich das Bild, um die Opazität und Text erscheint auf der Mitte der es - jeder Text, nicht notwendig die aktuelle Überschrift und den Absatz.

Answer 1

Positionierung des Textes div mit 'position:abolsute, um das Bild zu bedecken, ist der Anfang.

Das .menu-container div erhält position:relative, um einen Positionierungskontext bereitzustellen.

Dann wechseln Sie den :hover Trigger zum Wrapper, um beide gleichzeitig auszulösen.

.flex-menu, 
 
.menu-container, 
 
.menu-image { 
 
    width: 500px; 
 
} 
 
.menu-container { 
 
    position: relative; 
 
} 
 
.menu-description { 
 
    display: none; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.flex-menu { 
 
    background-color: #fd5c63; 
 
} 
 
.menu-image { 
 
    transition: all 0.3s ease 0s; 
 
    display: block; 
 
} 
 
.flex-menu:hover .menu-image { 
 
    opacity: 0.2; 
 
} 
 
.flex-menu:hover .menu-description { 
 
    display: block; 
 
}

<div class="flex-menu"> 
 
    <div class="menu-container"> 
 
    <img class="menu-image" src="http://www.libbyroach.ca/wp-content/uploads/2014/11/Adams-Sandwich.jpg" alt="Sandwitch"> 
 
    <div class="menu-description"> 
 

 
     <h4>Sandwitch</h4> 
 
     <p>Powder marshmallow marshmallow brownie carrot cake candy bonbon. Sweet sugar plum gummies caramels tart carrot cake tiramisu cheesecake. Cheesecake biscuit jelly beans. Jelly-o icing chocolate macaroon.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Position Text über das Bild mit position: absolute;

I :hover.menu-image-.menu-container verschoben haben, schauen einige Übergänge Änderungen besser:

.flex-menu, 
 
.menu-container, 
 
.menu-image { 
 
    width: 500px; 
 
} 
 
.flex-menu { 
 
    background-color: #fd5c63; 
 
} 
 
.menu-image { 
 
    opacity: 1; 
 
    display: block; 
 
    transition: opacity 300ms ease-in-out; 
 
} 
 
.menu-container:hover .menu-image { 
 
    opacity: 0.2; 
 
} 
 
.menu-container { 
 
    position: relative; 
 
} 
 
.menu-description { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 8; 
 
    transition: opacity 300ms ease-in-out; 
 
    opacity: 0; 
 
} 
 
.menu-container:hover .menu-description { 
 
    opacity: 1; 
 
}

<div class="flex-menu"> 
 
    <div class="menu-container"> 
 
    <img class="menu-image" src="http://www.libbyroach.ca/wp-content/uploads/2014/11/Adams-Sandwich.jpg" alt="Sandwitch"> 
 
    <div class="menu-description"> 
 

 
     <h4>Sandwitch</h4> 
 
     <p>Powder marshmallow marshmallow brownie carrot cake candy bonbon. Sweet sugar plum gummies caramels tart carrot cake tiramisu cheesecake. Cheesecake biscuit jelly beans. Jelly-o icing chocolate macaroon.</p> 
 
    </div> 
 
    </div> 
 
</div>