Hide an image by hovering over the div

Question

Hide an image by hovering over the div

Navigation

#1 by (0 votes)

-1

I'm trying to make an image disappear by hovering over div but I have a problem: when I move the mouse the image disappears, but I can not click on the div link from behind. Code:

<div class="col-md-8"> 
<div class="elemento-um"> 
<!-- LightWidget WIDGET -->
</div></div>

<div class="ico">
<a href='#'><img src='icon.png' /></a>
</div>

CSS:

.elemento-um {
    background: rgba(0, 0, 0, 0);
     margin-top: -127px;
     height: 107px;
     overflow: hidden; 
} 

.ico {
     opacity: 1;
     top: -140px;
     transition: .5s ease;
     z-index: 111;
     position: absolute; 
}

.ico a{ 
display: none; 
visibility:visible; 
} 

.ico:hover a {  
visibility: block; 
}

html css

asked by anonymous 05.06.2018 / 20:42

1 answer

Canvas is not showing up Capture images to create a database

score 0 · Accepted Answer

Lia,

By the code seems to be the opposite of what you asked, then I will answer based on your question.

The visibility:block property does not exist, the correct one would be visility:visible . The block is of the display. display:block .

The display:none hides the element of the screen, while the visibility:hidden leaves the element there only that hides the content.

But for this case it would not be useful to put display:none in the hover because when hover in the element will hide it and as it hid will not be in hover then the element will appear again and will be "flashing" on the screen appearing and disappearing .

Ideally, you should put a opacity:0 in the image when you hover in the div.

Ex:

.elemento-um {
    background: rgba(0, 0, 0, 0);
     margin-top: -127px;
     height: 107px;
     overflow: hidden; 
} 

.ico {
     opacity: 1;
     top: -140px;
     transition: .5s ease;
     z-index: 111;
     position: absolute; 
}

.ico:hover a {  
   visibility:hidden
}

Here's an example fiddle:

link