html - 如何在不破坏过渡 CSS/HTML 的情况下添加链接

Question

我将如何去做，以便当用户单击图像时，它会将他们带到另一个页面，尽管不会破坏过渡，因为我尝试过的一切都有效，但会删除过渡或使其中一个图像消失

html

<div class="box1"> 
<img class="bottom" src="images/eventbox2.png"/>
<img class="top" src="images/eventbox.png"/>
</div>

css

.box1 {
  width:430px;
  height:450px;
}


#imagetrans {
  position:relative;
  margin:0 auto;
}

#imagetrans img.top:hover,
#container > div img.top:hover {
  opacity:0;
  margin:0 auto;
}

#imagetrans img,
#container > div img {
  position:absolute;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

有任何想法吗？

Answer 1

您是否尝试过在 CSS 中添加“a”

#imagetrans img,
#container > div img a {
    position:absolute;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}