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 – 2015-04-05 14:55:52

CSS3：當鼠標懸停在圖像div上時顯示隱藏文本div

回答

相關問題