welcomemisuki Ответов: 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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>

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

</style>
</head>
<body>

<table>
  <tr>
<th>
     KING<br>
<a href="" target="_blank">
<div class="picture1">
  <img src="1.jpg" alt="Avatar"  width="200" height="auto">
  <div class="overlay1">
    <img src="5-1.jpg" alt="Avatar"  width="200" height="auto">
  </div>
</div>
</th> 
  </tr>
</table>

</body>
</html>


Что я уже пробовал:

visibility: hidden;

opacity: 1;

1 Ответов

Рейтинг:
0

Mukesh Jakhar

Используйте этот код, он будет работать..

<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.imgBox {
	width: 600px;
	height: 300px;
	background: url(https://www.newstriger.com/wp-content/uploads/2017/11/What-is-a-corporate-life-Funny-Quotes.jpg) no-repeat;
}
.imgBox:hover
{
	width: 600px;
	height: 300px;
	background: url(https://www.newstriger.com/wp-content/uploads/2017/01/Long-and-healthy-hair-tips-in-hindi.jpg) no-repeat;
}
</style>
</head>
<body>
	<div class="imgBox"> </div>
</body>
</html>