Display element when mouse is over an image

Asked

Viewed 2,201 times

2

I have 4 elements <div> where they have a component that is only displayed when the user hovers over the <div> container (the one that has class="thumbanil") however when I move the mouse over the hidden content the same becomes visible, this behavior should not happen because where the hidden content is positioned the other <div> container (this one has class="thumbanil").

How it should look: Content that is hidden should only be displayed when the mouse hovers over the <img> thumbnail and remain visible while the mouse is over the <div> container (the one that has class="thumbanil").

What I’ve done (but it didn’t work): I made the hidden element only visible when the mouse passed over the thumbnail but once the mouse left the thumbnail to enter the hidden content the hidden content (now visible) was hidden again, soon I returned 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 showing the defect: The red arrow is in place of the mouse, note that the mouse is (apparently) on top of the thumbnail of <div> below but is really upon the caption. inserir a descrição da imagem aqui

Example in FIDDLE, generated by user @Israelsousa.

html css

  • Can you play this in jsFiddle? I don’t see any div container in your HTML.

  • the div container is this with class="thumbanil" I will be more specific in the question.

  • I don’t quite understand what you want to do, I tested it here on a jsfidle and it’s working the way you want it to if that’s what I understand. https://jsfiddle.net/hk3ynf0p/

  • The Hover is showing up while you have the mouse positioned over the item.

  • @Israelsousa note that when you hover over the top of the image the hidden content of div superior. this should not happen.

  • For me the behavior is the same regardless of what part of the image the mouse does Hover... isn’t that so for you? which browser you use?

  • When I do the <div class="caption"> she is visible but she is hidden beneath another <div> and when I step or mouse over the top of the <div> this below is displayed the capition of the upper div, ex: in the fiddle pass the mouse at the top of the image of the crab, is displayed the caption of the Thunderbird image. Make the fiddle have a small size, so there is a line break and have a div on the other

  • I understood, when the mouse points to the <p> or <Strong> it appears, when what he wanted was only when he pointed to the image. Try this: . caption:Hover{ display:None; }

  • Ok, with the line break I already noticed the problem. Soluciona juntando visibility Hidden/Visible? -> https://jsfiddle.net/hk3ynf0p/2/

  • @Sergio Sim worked.

  • 1

    @Sergio, had already validated Fernando’s solution almost at the same time, post his answer so he can give you the 10 rep points. and for other users to see it in the future.

  • @Ricardohenrique, I think I’ve found a better solution response issue.

Show 7 more comments

2 answers

3


Problem

What’s happening is that by using opacity, to hide/display the element, it is only becoming transparent (opacity: 0) and it’s not leaving the view, so it keeps occupying its space on the screen, so by hovering over the top of the image below, the :Hover is considered in the <div class="thumbnail"> superior, because she is in that area.

Solution

What you can do is change the way to hide/display the element of opacity for display (display: block; = visible and in the view and display: none; = invisible and out of view), so the element when invisible did not occupy screen space not being considered for the event :hover in his 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 example jsFillde.

[Edit 1] (Best solution applying only the :hover on the img)

There is a way I found the best result using visibility as suggested in reply by @Sergio, and applying the :hover image only (img), because in the previous solutions if you went over the image, and were going down to the caption (div.caption), it kept being displayed, even if the mouse was already outside the image, because it was on the thumbnail (div.thumbnail), where the event was :hover.

So this solution consists of:

  • Add event Hover only the image (img);
  • Apply the style of Hover to his next brother element;
  • Maintain the effect of transction;

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 example jsFiddle.

  • +1, but if the problem is occupying screen space, I think the ideal was to do height: 0, width: 100% and overflow: visible to make the element always "visible" (although transparent) without occupying space.

  • Yes @ctgPi, there are several alternatives, to hide an element of the view, just have to see which one is most suitable for the situation. And the way I put the transaction that there was will not work anymore. But there are alternatives to keep it differently.

2

Another solution beyond what Fernando suggested is additional visibility as it avoids overlapping elements when the Browser tries to figure out which element is hovering over (Hover).

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

jsFiddle: https://jsfiddle.net/hk3ynf0p/2/

  • Correct, and as I said in another comment: there are still several other options to hide/display an element with css, which would work for this scenario. It is a question of checking which one best fits the application scenario. = D

Browser other questions tagged html css

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