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 |
---|