CSS3: Показать скрытый текст div при падении изображения div

Так что я пытаюсь сделать галерею изображений только с помощью css.CSS3: Показать скрытый текст div при падении изображения div

Я хочу, чтобы текст div закрывал все мои «фоновое изображение», когда я проходил курсор на нем. Прямо сейчас фон текста не покрывает его полностью.

Любая помощь приветствуется.

<!doctype html> 
<head> 
<meta charset="UTF-8"> 
</head> 

<style> 

@media only screen and (min-width: 769px) { 
.gridContainer { 
width: 88.2%; 
max-width: 1232px; 
padding-left: 0.9%; 
padding-right: 0.9%; 
margin: auto; 
} 

#mainWrapper{ 
width:100%; 
} 
.contentor{ 
display:block; 
width:33.3%; 
height:auto; 
position:relative; 
margin:0; 
float:left; 
} 
.imagem{ 
display:block;  
position:relative; 
width:100%; 
height:auto; 
left:0; 
top:0; 
} 
.texto{ 
display:block; 
z-index:100; 
position:absolute; 
font-size: 3em; 
font-weight:bold; 
left:50%; 
top:35%; 
margin-right: -50%; 
transform: translate(-50%, -50%); 
text-align:center; 
background: rgba(153, 102, 0, 0.6); 
transition: opacity 2s; /* efeito trans */ 
opacity:0; 
} 

.contentor:hover .texto{ 
    opacity:1; 
} 

} 

</style>

<div class="contentor"> 
     <img class="imagem" src="IMGS/index_amb.jpg"/> 
     <p class="texto">texto por cima</p> 
    </div> 

    <div class="contentor"> 
     <img class="imagem" src="IMGS/index_fuller.jpg"/> 
     <p class="texto">texto por cima</p> 
    </div> 

    <div class="contentor"> 
     <img class="imagem" src="IMGS/index_ft_rain.jpg"/> 
     <p class="texto">texto por cima</p> 
    </div> 

    <div class="contentor"> 
     <img class="imagem" src="IMGS/index_manual.jpg"/> 
     <p class="texto">texto por cima</p> 
    </div> 

    <div class="contentor"> 
     <img class="imagem" src="IMGS/index_pecados.jpg"/> 
     <p class="texto">texto por cima</p> 
    </div> 

    <div class="contentor"> 
     <img class="imagem" src="IMGS/index_e_r.jpg"/> 
     <p class="texto">texto por cima</p> 
    </div> 
</div>

источник

2015-04-05 David Monteiro

Посмотрите jQuerys парения() и мышь над() методами.

Извините. Я не тестировал это, но я бы подумал, что вам нужно будет установить элемент CSS в .hidden, а затем использовать событие mouseenter, mouseover для сброса CSS.

источник

2015-04-05 14:54:43 ballbern

Спасибо, ballbern, но я сказал, что я пытаюсь сделать это с помощью css –

CSS3: Показать скрытый текст div при падении изображения div

ответ

Смежные вопросы