How To Use :hover To Scale Overlap Images?

Contents hide

1 How to use :hover to scale overlap images?

Problem Description:

I am trying to make a hover effect so when any of the images have the mouse hovering over, the shirt scales to zero and the art scales up.
Unfortunately I can’t get this figure out I am very new to this
This is what I have so far.
I would appreciate any help.

.grid-container {
  display: grid;
}

.grid-container>* {
  grid-area: 1/1;
  /* shirt and art above each other */
  display: grid;
  grid-auto-flow: column;
  /* column flow so you can add as many image as you want */
  grid-auto-columns: 1fr;
  /* same width column */
  place-items: center;
  /* center everything */
}

.shirt img {
  max-width: 90%;
  /* controls the width of the shirt images */
}

.art img {
  max-width: 50%;
  /* controls the width of the art images  */
}

.art {
  transition-property: transform;
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
}

.art img:hover .scale.left{

  backdrop-filter: blur(5px);
  transform: scale(1.3);


}

<div class="grid-container">
  <div class="shirt">
    <img src="https://i.imgur.com/oS8QWPI.png">
    <img src="https://i.imgur.com/oS8QWPI.png">
    <img src="https://i.imgur.com/oS8QWPI.png">
  </div>
  <div class="art">
    <img src="https://i.imgur.com/jeNzULX.png" class="scale left">
    <img src="https://i.imgur.com/jeNzULX.png" class="scale mid">
    <img src="https://i.imgur.com/jeNzULX.png" class="scale right">
  </div>
</div>

Solution – 1

You need a different configuration where both images belong to the same container so you can easily achieve the hover effect:

.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.grid-container > div {
  display: grid;
  place-items: center;
}
.grid-container > div > img {
  grid-area: 1/1;
  transition: .5s;
}

.grid-container img:first-child {
  max-width: 90%; /* controls the width of the shirt images */
}

.grid-container img:last-child {
  max-width: 50%; /* controls the width of the art images  */
}

.grid-container div:hover img:first-child{
  transform: scale(0.3);
}
.grid-container div:hover img:last-child{
  transform: scale(1.3);
}

<div class="grid-container">
  <div>
    <img src="https://i.imgur.com/oS8QWPI.png">
    <img src="https://i.imgur.com/jeNzULX.png">
  </div>
  <div>
    <img src="https://i.imgur.com/oS8QWPI.png">
    <img src="https://i.imgur.com/jeNzULX.png">
  </div>
  <div>
    <img src="https://i.imgur.com/oS8QWPI.png">
    <img src="https://i.imgur.com/jeNzULX.png">
  </div>
</div>

Rate this post