Streaming live at 10am (PST)

Using hoven visibility: hidden; is blinking


#1

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

#2

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!