Как сделать тень для класса?

Question

[DereBkO]

Здравствуйте! Подскажите пожалуйста как сделать тень для класса "item_box_icon", когда у "item_box" стоит - overflow: hidden. Если убрать у "item_box" hidden, то круг, который появляется при наведении будет вылазить на границы квадрата "item_box"

Как это можно решить?

Тень которую нужно добавить к "item_box_icon" - box-shadow: 0px 10px 29px 0px rgba(64, 129, 255, 0.24)

<div class="item">
  <div class="item_box">
    <div class="item_box_icon"></div>
  </div>
	<div class="item_box">
    <div class="item_box_icon"></div>
  </div>
</div>

.item
  margin-top: 20px
  display: flex
  justify-content: center
  gap: 13px
  
  &_box
    padding: 36px 16px 36px 24px
    width: 350px
    height: 345px
    border-radius: 4px
    background: #1b2837
    position: relative
    overflow: hidden
    
    &:hover
    
      .item_box_icon
        width: 548px
        height: 548px
        border-radius: 50%
        background: #003adb
        bottom: -223px
        right: -206px
        z-index: 0
        transition: 0.3s
      
    &_icon
      width: 136px
      height: 102px
      border-radius: 69.5px 0px 4px 4px
      background: #003adb
      // box-shadow: 0px 10px 29px 0px rgba(64, 129, 255, 0.24)
      position: absolute
      bottom: 0
      right: 0
      z-index: 0
      transition: 0.3s

Answer 1

[Sergey]

Так ??

.item {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 13px;
}

.item_box {
  position: relative;
  overflow: hidden;
  width: 350px;
  height: 345px;
  border-radius: 4px;
  background: #1b2837;
}

.item_box_icon {
  width: 136px;
  height: 102px;
  border-radius: 50%;
  background: #003adb;
  position: absolute;
  bottom: -100px;
  right: -100px;
  z-index: 0;
  transition: 0.3s;
  box-shadow: 0px 10px 29px 0px rgba(64, 129, 255, 0.24);
}

.item_box:hover .item_box_icon {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  bottom: -180px;
  right: -180px;
  z-index: 0;
  transition: 0.3s;
}