when I hover over the div, I want the effect of the cover art not to overflow out of the box and to act as it does in the profile picture. They are currently moving when they pass them one by one, can you help

.card {
  box-shadow: inset -2px 2px 20px 1px #0a031a7a;
  margin: 1px;
  transition: background-color .15s, box-shadow .15s;
  border-radius: 15px;
  background: gray;
  width: 460px;
}

.kingbox:not(.not-hoverable) {
  cursor: pointer;
}

.kingbox:hover>.queenbox:hover {
  background-color: rgba(9, 20, 26, 0.8);
}

.kingbox .queenbox:hover {
  transform-origin: center;
  transform: scale(1.075);
}

.queenbox {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  width: 460px;
}

.princebox:hover {
  transform-origin: center;
  transform: scale(0.95);
}

.princebox {
  width: 70px;
  height: 70px;
  border-radius: 15px;
  position: relative;
  margin-top: -40px;
  left: 25px;
}

.img1 {
  width: 50px;
  object-fit: contain;
  margin-top: 5px;
}

.kingbox {
  box-shadow: 0 0 0 1px transparent;
  margin: 1px;
  transition: background-color .15s, box-shadow .15s;
}

<div >
  <img  src="https://cdn.ntvspor.net/083b3a697b6f48b48e59e770630cfdd5.jpg?crop=0,48,940,577&w=1200&mode=crop" alt="" style="" loading="lazy">
  <div  style="background: url(https://sportpng.com/wp-content/uploads/2020/01/Cristiano-Ronaldo-sportpng-3.jpg);background-repeat: no-repeat;background-size: cover;background-position: center;">
  </div>
  <div  style="padding: 15px;">
    <h6 >
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/FIFA_series_logo.png" >
    </h6>
    <p >Fifa 07...</p>
    <a href="javascript:;" >Button</a>
  </div>
</div>

CodePudding user response：

overflow:hidden as suggested seems to do the trick

.card {
  box-shadow: inset -2px 2px 20px 1px #0a031a7a;
  margin: 1px;
  transition: background-color .15s, box-shadow .15s;
  border-radius: 15px;
  background: gray;
  width: 460px;
  overflow:hidden;
}

.kingbox:not(.not-hoverable) {
  cursor: pointer;
}

.kingbox:hover>.queenbox:hover {
  background-color: rgba(9, 20, 26, 0.8);
}

.kingbox .queenbox:hover {
  transform-origin: center;
  transform: scale(1.075);
}

.queenbox {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  width: 460px;
}

.princebox:hover {
  transform-origin: center;
  transform: scale(0.95);
}

.princebox {
  width: 70px;
  height: 70px;
  border-radius: 15px;
  position: relative;
  margin-top: -40px;
  left: 25px;
}

.img1 {
  width: 50px;
  object-fit: contain;
  margin-top: 5px;
}

.kingbox {
  box-shadow: 0 0 0 1px transparent;
  margin: 1px;
  transition: background-color .15s, box-shadow .15s;
}

<div >
  <img  src="https://cdn.ntvspor.net/083b3a697b6f48b48e59e770630cfdd5.jpg?crop=0,48,940,577&w=1200&mode=crop" alt="" style="" loading="lazy">
  <div  style="background: url(https://sportpng.com/wp-content/uploads/2020/01/Cristiano-Ronaldo-sportpng-3.jpg);background-repeat: no-repeat;background-size: cover;background-position: center;">
  </div>
  <div  style="padding: 15px;">
    <h6 >
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/FIFA_series_logo.png" >
    </h6>
    <p >Fifa 07...</p>
    <a href="javascript:;" >Button</a>
  </div>
</div>

CodePudding user response：

.card {
  box-shadow: inset -2px 2px 20px 1px #0a031a7a;
  margin: 1px;
  transition: background-color .15s, box-shadow .15s;
  border-radius: 15px;
  background: gray;
  width: 460px;
  overflow:hidden;
}

.kingbox:not(.not-hoverable) {
  cursor: pointer;
}

.kingbox:hover>.queenbox:hover {
  background-color: rgba(9, 20, 26, 0.8);
}

.kingbox .queenbox:hover {
  transform-origin: center;
  transform: scale(1.075);
}

.queenbox {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  width: 460px;
}

.princebox:hover {
  transform-origin: center;
  transform: scale(0.95);
}

.princebox {
  width: 70px;
  height: 70px;
  border-radius: 15px;
  position: relative;
  margin-top: -40px;
  left: 25px;
}

.img1 {
  width: 50px;
  object-fit: contain;
  margin-top: 5px;
}

.kingbox {
  box-shadow: 0 0 0 1px transparent;
  margin: 1px;
  transition: background-color .15s, box-shadow .15s;
}

<div >
  <img  src="https://cdn.ntvspor.net/083b3a697b6f48b48e59e770630cfdd5.jpg?crop=0,48,940,577&w=1200&mode=crop" alt="" style="" loading="lazy">
  <div  style="background: url(https://sportpng.com/wp-content/uploads/2020/01/Cristiano-Ronaldo-sportpng-3.jpg);background-repeat: no-repeat;background-size: cover;background-position: center;">
  </div>
  <div  style="padding: 15px;">
    <h6 >
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/FIFA_series_logo.png" >
    </h6>
    <p >Fifa 07...</p>
    <a href="javascript:;" >Button</a>
  </div>
</div>

Hi, firstly thanks. When Fifa is 07 AND the Button is hover where it is, I want all the hover to work