текст над прозрачным фоном во время зависания

Question

Я пытаюсь заставить текст появляться внутри ячейки таблицы, когда он витает. Я хочу, чтобы текст оставался скрытым, пока я не надвигаюсь на него. Я сделал это, но не знаю, как заставить текст выглядеть сплошным цветом (когда я наводил курсор на ячейку, он уменьшает ее непрозрачность). Есть ли способ добавить текст поверх всего, используя jQuery? Я хотел бы сделать это для каждой из шести ячеек. Я попытался использовать z-index для этого, но это не сработало.

HTML

<div> 
    <a NAME="work"> 
    <div class="samples"> 
    <table> 
     <th>Pokemon</th> 
     <tr>   
      <td id = "squirtle"> 
       <img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png"> 
      </td> 
      <td><img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png"></td> 
      <td><img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png"></td> 
     </tr> 
     <tr> 
      <td><img src = "http://vignette3.wikia.nocookie.net/fantendo/images/a/a5/Pikachu_digital_art_pokemon_by_dark_omni-d5wotdb.png/revision/latest?cb=20141113035440"></td> 
      <td><img src = "https://upload.wikimedia.org/wikipedia/en/5/5f/Pok%C3%A9mon_Lugia_art.png"></td> 
      <td><img src = "http://vignette1.wikia.nocookie.net/pokemon/images/f/ff/Togepi.png/revision/latest?cb=20100731212849"</td> 
     </tr> 
    </table> 
</div> 

CSS

.samples table{ 
    table-layout: fixed; 
    position: relative; 
    width: 100%; 
} 
.samples td img{ 
    height:300px; 
    width: 300px; 
    position: center; 
    z-index:3; 
} 
.samples td{ 
    text-align: center; 
    height: 300px; 
    width: 300px; 
    background-color: rgb(0,300,300); 
    padding: 0px; 
    margin: 0px; 
    border-color: 2px solid black; 
} 

.samples td#squirtle:hover p{ 
    visibility: visible; 
    color: black; 
    opacity: 0.8; 
} 

.samples td:hover{ 
    opacity: .7; 
} 

.samples td#squirtle p{ 
    visibility: hidden; 
} 

JQuery

$(".samples td img").click(function(){ 
    $(this).text("squirtle rules"); 
}) 

Answer 1

Для того, чтобы текст появился твердый, изменить

.samples td:hover{ 
    opacity: .7; 
} 

к

.samples td:hover img{ 
    opacity: .7; 
} 

это будет применить изменения непрозрачности к img, но не все остальное в td.

Чтобы получить текст поверх изображения, сначала добавьте position: relative; в .samples td, затем добавить правило:

.samples p { 
    margin: 0; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    right: 0; 
    transform: translateY(-50%); 
    color: #fff; 
    font-family: sans-serif; 
    font-size: 30px; 
} 

position: relative на любом элементе означает, что любой из его детей с position: absolute будут располагаться внутри этого родителя , а не все окно.

Вот пример: https://jsfiddle.net/x1jxpe3m/

Answer 2

это стало возможным без JQuery

<div> 
<a NAME="work"> 
<div class="samples"> 
<table> 
    <th>Pokemon</th> 
    <tr>   
     <td id = "squirtle"> 
      <a href="#" class="wrapper"> 
       <span class="text"> 
        This is text 
       </span> 
       <img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png"> 
      </a> 
     </td> 
     <td> 
      <a href="#" class="wrapper"> 
       <span class="text"> 
        This is text 
       </span> 
       <img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png"> 
      </a> 
     </td> 
    </tr> 
</table> 

CSS

<style type="text/css"> 
.td{ 
    background-color: purple; 
    width:300px; 
    height:300px; 
} 
.wrapper { 
    position: relative; 
    padding: 0; 
    width:300px; 
    height:300px; 
    display:block; 
} 
.wrapper img { 
    height: 300px; 
    width: 300px; 
} 
.text { 
    position: absolute; 
    top: 0; 
    color:#f00; 
    background-color:rgba(255,255,255,0.8); 
    width: 100%; 
    height: 100%; 
    line-height:100px; 
    text-align: center; 
    padding-top: 40px; 
    z-index: 10; 
    opacity: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
.text:hover { 
    opacity:1; 
} 

img { 
    z-index:1; 
} 


</style> 

, но если вы все-таки настаивают на том, что вы хотите сделать это с посмотрите этот блог http://alijafarian.com/jquery-image-hover-captions/ и посмотри Demo here. Удачи