CSS3: Show a hidden div when hovering over another div

Question

CSS3: Show a hidden div when hovering over another div

Navigation

#1 by (3 votes)
#2 by (2 votes)

3

Good afternoon. At the moment I have 2 divs, 1 of them visible and the other hidden, being visible when I hover over the first.

I would like that when the div is displayed with text, the background of the div fills the entire div that contains the image.

Sorry if it's a basic question.

I want to do this through css.

Thank you

@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;
}

<div>
  <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>

html css

asked by anonymous 05.04.2015 / 16:31

2 answers

How to group data by an id in R Disable / enable scrolling with JQuery

score 3 · Answer 1

Fix a simple example on fiddle of how you can do this. See below the sample source code:

figure {
    margin: 0;
}

section {
    position: relative;
    width: 400px;
}

section:hover article {
    visibility: visible;
    display: block;
}

section img {
    max-width: 100%;
}

section article {
    position: absolute;
    bottom: 0;
    margin: 1rem;
    display: none;
    visibility: hidden;
}

<section>
    <figure>
        <img src="http://i.dailymail.co.uk/i/pix/2014/10/06/1412613364603_wps_17_SANTA_MONICA_CA_AUGUST_04.jpg"alt="">
    </figure>
    <article>
        <h2>Heading</h2>
        <p>Libero eius molestiae, distinctio facilis eaque odio quam illum amet enim. Consequuntur consequatur nostrum eligendi molestias perspiciatis, consectetur eaque. Nihil, officia, quos.</p>
    </article>
</section>

score 2 · Answer 2

I would recommend you use the image as background of the .contentor div

<div class="contentor" style="background-image: url('IMGS/index_amb.jpg')">

        <p class="texto">texto por cima</p>
</div>

Another possible solution would be:

.contentor img{
 z-index: 1;
}
.contentor p{
   margin-left: -Xpx /*X é a largura de img*/;
   margin-top: -Xpx /*X é a altura de img*/;
   z-index: 2;
}

As for hover, just put these styles:

.contentor p{
  display: none;
}
.contentor:hover p{
  display: block;
}