how to zoom a div with :hover but not the image inside-CodePudding

I want to zoom a container from both sides when hovered but not the image inside of it and the divs floating around must became smaller while zoom one of it. You can check the result I wanna achieve at: https://www.bitforex.com/ you can find it at half page level I developed this: enter code herehttps://jsfiddle.net/Diana_rossa/419wko53/7/

The problem is I can't figure out how to zoom on both sides the div at same time Can someone help me?

CodePudding user response：

You can use background-position: center to achieve this effect if you use the image as a background image.

Update: by placing a few of those inside a flex container it looks almost ready.

.frame {
  width: 100px;
  margin: 20px auto;
  background-image: url('https://picsum.photos/200/150');
  height: 150px;
  transition: 0.5s;
  border: 1px solid red;
  background-position: center;
}

.frame:hover {
  width: 200px;
}

<div style="display:flex">
  <div >
  </div>
  <div >
  </div>
  <div >
  </div>
</div>

CodePudding user response：

Here is the example:

.container {
  width: 90%;
  padding: 10px;
  margin: 5px auto;
  background: #ddd;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.box {
  width: 200px;
  height: 200px;
  background-image: url('https://images.pexels.com/photos/5925951/pexels-photo-5925951.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  background-position: center;
  margin: 0px 10px;
  transition: 1s;
}

.box:hover {
  width: 300px;
  z-index: 2;
  box-shadow: 2px 2px 2px #000;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>