Using hoven visibility: hidden; is blinking

I have tried and searched many website to solve my problem, but still does not worked.
I have 2 pictures, first one is larger than second one, I want when the second one appear, the first one is disappear when the mouse move onto the first picture.

there are my element as below:

table, th {
margin:0px auto;
border: 1px solid black;
padding: 1px;
}

th
{
vertical-align: top;
width:250px;
height:250px;
display: inline-block;
}

img
{
position: absolute;
clip: rect(0px 200px 200px 0px);
padding: 1px;
display: block;
margin-right: 5px;
margin-left: 25px;
}

.picture1 {
position: relative;
width: 100%;
max-width: 500px;
}

.picture1:hover {
visibility: hidden;
}

.overlay1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.3s ease;
}

.overlay1:hover {
opacity: 1;
}

KING
Avatar
Avatar

Hi @welcomemisuki

Thanks for posting and welcome to the Forums. Can you please share your Read-Only link to your Webflow project? :slight_smile:

I also recommend updating your post based on the bug posting guidelines. Thanks in advance!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.