CSS3: Show a hidden div when doing Hover over another div

Asked

Viewed 1,843 times

3

Good afternoon. At this time I have 2 Ivs, 1 of them visible and the other hidden, being visible when I do the first.

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

I’m sorry if it’s a basic question.

I intend 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
  • 1

    I believe the solution is practically ready here: http://answall.com/q/56996/70

  • 1

    Is this what you want? -> https://jsfiddle.net/4nzpkgu6/

  • Sérgio, that’s it but occupying the entire div, in this case only occupies horizontally :)

  • David, so -> https://jsfiddle.net/4nzpkgu6/1/ ? If you’re not, explain it better... Add a screenshot of how you want it?

  • That’s enough, thank you :D

  • Related: http://answall.com/questions/26684/

Show 1 more comment

2 answers

3

Fix a simple example in fiddle how you can do this. See below the example 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>

2

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

<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 the Hover is just put these styles:

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

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.