elemnt: hover - текст и фон

Question

Мне нужно, чтобы текст отображался на изображении после его наведения, а также мне нужно, чтобы он повлиял на непрозрачность.

Посмотрите на эту ручку 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> 

Результат Ищу:

наведите курсор мыши на изображение меняет свою прозрачность и на середине этого появляется текст - любой текст, а не необходимо указать текущий заголовок и пункт.

Answer 1

Позиционирование текста div с помощью 'position:abolsute, чтобы покрыть изображение, является началом.

.menu-container div получает position:relative, чтобы обеспечить контекст позиционирования.

Затем переключите триггер :hover на оболочку, чтобы вызвать оба действия одновременно.

.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: absolute;

я переехал :hover из .menu-image в .menu-container, некоторые переходы изменения, чтобы выглядеть лучше:

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