Placing two different images on hover with two center images side by side-CodePudding

I am fairly new to HTML in the past month. I cannot for the life of me, figure out how to change the second image on hover to be a different image when the mouse hovers over it. I know some of the code probably looks dumb with how I tried to guess how I could possibly alter the second hover image. But I am quite confused. If anyone could help that would be great. The only progress I made so far is finally getting them perfectly aligned the way I would want them in the center and also the smooth transition to the hover. All that is left is being stumped on how to change the image to a different one when you hover over the second image. I do not want both hover images to be the same.

* {
  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 >
  <a href="https://trezoro.co">
    <img src="https://via.placeholder.com/500" alt="Le Tricolore Smartwatch" >
    <div >
      <p>Entire element is the link here</p>
    </div>
  </a>
</div>
<div >
  <img src="https://via.placeholder.com/500" alt="Le Tricolore Smartwatch" >
  <div >
    <a href="https://trezoro.co">
    </a>
  </div>
  <div >
    <p>Only the text is a link </p>
  </div>
</div>

CodePudding user response：

QUESTION

How to change the second image on hover to be a different image when the mouse hovers over it?

ANSWER

The approach of this question is to change an image when the user hovering the mouse over it. This task can be simply done by using the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.

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

CodePudding user response：

I don't know what is p tags are for, so I removed those. Also, I used a div with background-image instead img tag. when you hover on the container, the image changes.

* {
  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;
}
.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);

}
.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 >
<div >
  <a href="https://trezoro.co">
    <div ></div>
  </a>
</div>
<div >
  <div ></div>
  <div >
    <a href="https://trezoro.co">
    </a>
  </div>
</div>
</div>