Hide an image by hovering over the div

Question

I’m trying to make an image disappear by hovering over the div but I have a problem: when I move the mouse the image disappears, but I can’t click the link from the back div. 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; 
}

Answer 1

Lia,

The code seems to be contrary to what you asked, so I’ll answer based on your question.

The estate visibility:block does not exist, the correct would be visility:visible. The block is from the display. display:block.

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

But in that case it wouldn’t do display:none in the Hover because when you see the element will hide it and as it hid it will no longer be in Hover then the element will appear again and be "flashing" on the screen appearing and disappearing.

the ideal would be to put a opacity:0 in the image when you see it in the div.ico.

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
}

Follow an example fiddle:

https://jsfiddle.net/ey0m7rta/9/