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

user_11170896 0
Viewed 145

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

css html
2 Answers

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

user_170071840

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

user_166743790
Related