when I hover over the div

Question

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 class="card kingbox"> <img class="queenbox" src="https://cdn.ntvspor.net/083b3a697b6f48b48e59e770630cfdd5.jpg?crop=0,48,940,577&w=1200&mode=crop" alt="" style="" loading="lazy"> <div class="princebox" 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 class="x" style="padding: 15px;"> <h6 class="card-title"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/FIFA_series_logo.png" class="img1"> </h6> <p class="card-text fs-12">Fifa 07...</p> <a href="javascript:;" class="btn btn-sm btn-inverse float-right">Button</a> </div> </div>

Answer 1

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 class="card kingbox"> <img class="queenbox" src="https://cdn.ntvspor.net/083b3a697b6f48b48e59e770630cfdd5.jpg?crop=0,48,940,577&w=1200&mode=crop" alt="" style="" loading="lazy"> <div class="princebox" 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 class="x" style="padding: 15px;"> <h6 class="card-title"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/FIFA_series_logo.png" class="img1"> </h6> <p class="card-text fs-12">Fifa 07...</p> <a href="javascript:;" class="btn btn-sm btn-inverse float-right">Button</a> </div> </div>

Answer 2

 .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 class="card kingbox"> <img class="queenbox" src="https://cdn.ntvspor.net/083b3a697b6f48b48e59e770630cfdd5.jpg?crop=0,48,940,577&w=1200&mode=crop" alt="" style="" loading="lazy"> <div class="princebox" 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 class="x" style="padding: 15px;"> <h6 class="card-title"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/FIFA_series_logo.png" class="img1"> </h6> <p class="card-text fs-12">Fifa 07...</p> <a href="javascript:;" class="btn btn-sm btn-inverse float-right">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