Текст на фотографии не отображается

Question

Текст на моем изображении не отображается. Его анимация, но я хочу текст на моем изображении при наведении мыши. Для текста я использовал кнопку с изображением, которое, предположительно, всплывало на мышином hover.let, я знаю свою ошибку. Я использую этот код из учебника youtube.

.main 
 
{ 
 
border: 10px solid white; 
 
width:378px; 
 
height:250px; 
 
margin:50px auto; 
 
box-shadow:0px 0px 25px black; 
 
overflow:hidden; 
 
} 
 

 
.main:hover img 
 
{ 
 
-webkit-transform:scale(2,2) rotate(45deg); 
 
} 
 

 
.main:hover .content 
 
{ 
 
-webkit-transform:translate(-311px); 
 
} 
 

 
img 
 
{ 
 
-webkit-transition: -webkit-transform: 300ms; \t 
 
} 
 

 
.content 
 
{ 
 
\t width:378px; 
 
    \t height:250px; 
 
\t background: rgba(124,120,120,0.5); 
 
    -webkit-transition: -webkit-transform: 300ms; 
 
} 
 
    
 
    button 
 
    { 
 
\t width:100%; 
 
\t height:50px; 
 
\t margin-top:200px; 
 
\t background:black; 
 
\t border:0; 
 
\t cursor:pointer; 
 
\t color:white; 
 
\t font:16px tahoma; 
 
    } 
 
    
 
    button:hover { 
 
\t opacity: 0.5; 
 
    }

<div class="main"><img src="img/switch.jpg" height="250" width="378"><div class="content"><button>Pepe Kalvier Switches</button></div></div>

Answer 1

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

CSS

.main:hover .content{ 
    z-index: 9999; 
    position: absolute; 
    top:0; 
} 

DEMO HERE

Answer 2

вы можете попробовать это:

<div class="main"><img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" height="250" width="378"><div class="content"><button>Pepe Kalvier Switches</button></div></div> 

DEMO