Display element when the mouse is over an image

Question

Display element when the mouse is over an image

Navigation

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

2

I have 4 elements <div> where they have a component that only appears when the user hover over <div> container (which has class="thumbanil" ) but when mouse over the hidden contents o even if it is visible, this behavior should not happen because where the hidden content is, it is positioned to the other <div> container (this has class="thumbanil" ).

How it should stay: Content that is hidden should be displayed only when the mouse passes over <img> thumbnail and remains visible as long as the mouse is over <div> container ( which has class="thumbanil" ).

What I already did (but did not work): I made the hidden element visible only when the mouse moves over the thumbnail but as soon as the mouse exits the thumbnail to enter the content hidden

hidden content (now visible) was hidden again, so I went back to the previous one of the code.

HTML code:

                <div class="col-md-8 section span7 text-center">
                    <div class="thumbnail">
                        <img src="assets/images/projetos/thumbnail.png" alt="Site Pessoal">
                        <div class="caption">
                            <p><strong>Site</strong></p>
                            <p>
                                <a href="#" class="btn btn-info gray gly_medium" id="site-imagens" title="Veja imagens">
                                    <span class="glyphicon glyphicon-search"></span>
                                </a>
                                <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
                                    <span class="glyphicon glyphicon-link"></span>
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="thumbnail">
                        <img src="assets/images/projetos/thumbnail.png" alt="Video Site">
                        <div class="caption">
                            <p><strong>Video Content Site</strong></p>
                            <p>
                                <a href="#" class="btn btn-info gray gly_medium" id="video-imagens" title="Veja Imagens">
                                    <span class="glyphicon glyphicon-search"></span>
                                </a>
                                <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
                                    <span class="glyphicon glyphicon-link"></span>
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="thumbnail">
                        <img src="assets/images/projetos/thumbnail.png" alt="Video Site">
                        <div class="caption">
                            <p><strong>Video Site</strong></p>
                            <p>
                                <a href="#" class="btn btn-info gray gly_medium" id="video-imagens" title="Veja Imagens">
                                    <span class="glyphicon glyphicon-search"></span>
                                </a>
                                <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
                                    <span class="glyphicon glyphicon-link"></span>
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="thumbnail">
                        <img src="assets/images/projetos/thumbnail.png" alt="Video Site">
                        <div class="caption">
                            <p><strong>Video Site</strong></p>
                            <p>
                                <a href="#" class="btn btn-info gray gly_medium" id="video-imagens" title="Veja Imagens">
                                    <span class="glyphicon glyphicon-search"></span>
                                </a>
                                <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
                                    <span class="glyphicon glyphicon-link"></span>
                                </a>
                            </p>
                        </div>
                    </div>
                </div>

CSS Code:

.thumbnail{
    display:inline-block
}

.caption{
    opacity:0; 
    transition:opacity .5s;
    position:absolute;
    background-color:#fff;
    width:308px;
    margin-left:-5px
}

.thumbnail:hover .caption{ 
    opacity:1; 
    z-index:1
}

Image that demonstrates the defect: The red arrow is in the place of the mouse, notice that the mouse is (apparently) on top of the <div> thumbnail below but is actually above caption .

Exampleon FIDDLE , generated by user @IsraelSousa.

html css

asked by anonymous 05.06.2015 / 15:09

2 answers

2

Another solution in addition to what Fernando suggested is additional visibility because it avoids overlapping elements when the Browser tries to figure out which element it is hovering over.

So joining visibility: hidden; to class without :hover and visibility: visible; to class with :hover also solves the problem.

jsFiddle: link

05.06.2015 / 16:09

How to configure security for dedicated servers and VPS? Add days to Javascript Date () in the format dd / mm / yyyy [duplicate]

score 3 · Accepted Answer

Problem

What is happening is that by using opacity , to hide / display the element, it is only becoming transparent ( opacity: 0 ) and is not exiting the view, so it continues to occupy its screen space, so When hovering over the top of the image below, the: hover is considered in the top% of%, since it is in that area.

Solution

What you can do is to change how to hide / display the element from <div class="thumbnail"> to opacity (display: block; = visible and in view and display = invisible and out of view), so element when invisible will not occupy space on the screen not being considered for the display: none; event in its parent . Getting something similar to this:

.caption{
    display: none; /* trocado de opacity */
    transition:opacity .5s; /* dessa forma essa transition não funcionaria */
    position:absolute;
    background-color:#fff;
    width:308px;
    margin-left:-5px
}

.thumbnail:hover .caption{ 
    display: block; /* trocado de opacity */
    z-index:1
}

Online sample jsFillde.

[Edit 1] (Best solution only applying :hover to :hover )

There is a way that I find the best result using img as suggested in the @Sergio answer , and by applying the visibility only the image ( :hover ), because in the previous solutions if you were on the image, and going down to the caption ( img ), it continued to be displayed, even if the mouse was already out of the image, since it was about div.caption ( thumbnail ), where was the div.thumbnail event.

So this solution consists of:

Add event hover to only image ( :hover );
Apply the hover style to your next sibling element;
Keep the effect of img ;

Being the following:

.thumbnail {
  display: inline-block
}
.caption {
  opacity: 0;
  visibility: hidden;
  transition: opacity 3s;
  /* aumentei o tempo para poder ser visto o transaction */
  position: absolute;
  background-color: #fff;
  width: 308px;
  margin-left: -5px
}
img:hover +.caption {
  opacity: 1;
  visibility: visible;
  z-index: 1
}

<div class="thumbnail">
  <img src="http://davidnaylor.org/temp/thunderbird-logo-200x200.png"alt="Site Pessoal" />
  <div class="caption">
    <p><strong>Site</strong>
    </p>
    <p>
      <a href="#" class="btn btn-info gray gly_medium" id="site-imagens" title="Veja imagens">
        <span class="glyphicon glyphicon-search"></span>
      </a>
      <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
        <span class="glyphicon glyphicon-link"></span>
      </a>
    </p>
  </div>
</div>
<div class="thumbnail">
  <img src="https://upload.wikimedia.org/wikipedia/en/7/71/Quebec_citadelles_200x200.png"alt="Video Site" />
  <div class="caption">
    <p><strong>Video Content Site</strong>
    </p>
    <p>
      <a href="#" class="btn btn-info gray gly_medium" id="video-imagens" title="Veja Imagens">
        <span class="glyphicon glyphicon-search"></span>
      </a>
      <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
        <span class="glyphicon glyphicon-link"></span>
      </a>
    </p>
  </div>
</div>
<div class="thumbnail">
  <img src="http://horoscopo.ego.globo.com/img/horoscopo.ego.globo.com/icones/signos/gemeos-g.png"alt="Video Site" />
  <div class="caption">
    <p><strong>Video Site</strong>
    </p>
    <p>
      <a href="#" class="btn btn-info gray gly_medium" id="video-imagens" title="Veja Imagens">
        <span class="glyphicon glyphicon-search"></span>
      </a>
      <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
        <span class="glyphicon glyphicon-link"></span>
      </a>
    </p>
  </div>
</div>
<div class="thumbnail">
  <img src="http://horoscopo.ego.globo.com/img/horoscopo.ego.globo.com/icones/signos/cancer-g.png"alt="Video Site" />
  <div class="caption">
    <p><strong>Video Site</strong>
    </p>
    <p>
      <a href="#" class="btn btn-info gray gly_medium" id="video-imagens" title="Veja Imagens">
        <span class="glyphicon glyphicon-search"></span>
      </a>
      <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
        <span class="glyphicon glyphicon-link"></span>
      </a>
    </p>
  </div>
</div>

Online sample jsFiddle.