将两个不同的图像悬停，两个中心图像并排放置

Question

在过去的一个月里，我对HTML相当陌生。我一辈子都不知道如何在鼠标悬停时将悬停时的第二个图像更改为不同的图像。我知道有些代码可能看起来很愚蠢，因为我试图猜测如何更改第二个悬停图像。但我很困惑。如果有人能帮忙那就太好了。到目前为止，我取得的唯一进展是最终使它们以我希望的方式完美对齐，并顺利过渡到悬停。剩下的就是当你悬停在第二张图像上时，如何将图像更改为不同的图像。我不希望两个悬停图像相同。

* {
background-color: coral;
}
.container {
position: relative;
width: 50%;
overflow: hidden;
display: table-cell;
border: 1px solid transparent;
/* a way to add a space around */
}
@media screen and (max-width:480px) {
.container {
/* make them full-width and one-a-row */
width: 100%;
display: block;
}
}
.image {
display: table-cell;
width: 100%;
height: auto;
transition: all .4s ease-in;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: .5s ease;
background-image: url("sketchcollage.JPG");
color: white;
text-align: center;
padding-top: 40%;
}
.overlay .overlay2 {
background-image: url("digitalartcollage.JPG");
}
a {
color: white;
}
.container:hover .overlay {
opacity: 1;
}
.container:hover .image {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
h1 {
text-align: center;
font-size: 72px;
background: -webkit-linear-gradient(rgb(12, 215, 230), rgb(170, 9, 130));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

<h1> Who is Rosalyn? </h1>
<div class="container">
<a href="https://trezoro.co">
<img src="https://via.placeholder.com/500" alt="Le Tricolore Smartwatch" class="image">
<div class="overlay">
<p>Entire element is the link here</p>
</div>
</a>
</div>
<div class="container">
<img src="https://via.placeholder.com/500" alt="Le Tricolore Smartwatch" class="image">
<div class="overlay">
<a href="https://trezoro.co">
</a>
</div>
<div class="overlay2">
<p>Only the text is a link </p>
</div>
</div>

Answer 1

我不知道p标签是用来做什么的，所以我删除了它们。此外，我使用了带有background-image的div，而不是img标签。当您将鼠标悬停在container上时，图像会发生变化。

* {
background-color: coral;
}
.flex{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: 50vh;
}
.container {
position: relative;
width: 48%;
overflow: hidden;
}
@media screen and (max-width:480px) {
.container {
width: 100%;
margin-top: 20px;
}
.flex{
height: 100vh;
}
}
.img{
background-size: 100% 100%; 
transition: all .4s ease-in;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
}
.img1{
background-image: url('https://s4.uupload.ir/files/5c29cf910a706_8m.jpg');
}
.img2{
background-image: url('https://s4.uupload.ir/files/717195_346_g0du.jpg');
}
a {
color: white;
}
.container:hover .img {
transform: scale(1.2);
-webkit-transform: scale(1.2);
opacity: 0.5;
}
.container:hover .img1{
background-image: url('https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg');
}
.container:hover .img2{
background-image: url('https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg');
}
h1 {
text-align: center;
font-size: 72px;
background: -webkit-linear-gradient(rgb(12, 215, 230), rgb(170, 9, 130));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

<h1> Who is Rosalyn? </h1>
<div class="flex">
<div class="container">
<a href="https://trezoro.co">
<div class="img img1"></div>
</a>
</div>
<div class="container">
<div class="img img2"></div>
</div>
</div>

Answer 2

问题

当鼠标悬停在第二个图像上时，如何将其更改为不同的图像？

答案

这个问题的方法是当用户将鼠标悬停在图像上时更改图像。这个任务可以简单地通过使用CSS background-image属性和：hover pseudo类来替换或更改鼠标悬停上的图像来完成。

.changeImg:hover {
background-image: 
url("https://images.app.goo.gl/gfRnCCBPH6r4v3kp6");
}