CSS3: Show a hidden text div when hovering a image div
Question
So I'm trying to make a image gallery only with css.
I want the text div to cover all of my "background-image" when I pass the cursor on it. Right now the background of text does not cover it totally.
Any help is appreciated.
<!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>
1 answers
solution1
0 2015-04-05 14:54:43
Have a look at jQuerys hover() and mouse over() methods.
Sorry. I haven't tested this but I would think that you would need to set the CSS element to .hidden and then use the mouseenter, mouseover event to reset the CSS.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS show div when hovering an image
Show hidden content when hovering a div
Show content when hovering over div in CSS
CSS: changing image in div when hovering
Image popup when hovering a text div
Show div when hovering on others div background image
Change div image with transition when hovering an other div (ONLY CSS)
I'm trying hide div 1 when hovering it, then show div 2 when div 1 is hidden
How to show div on hovering image?
Want to change the background of an div on hovering another div in css3
Related Tags