1

Есть два дива - родительский (relative) и дочерний (absolute).

Дочерний имеет выосту и ширину - 0 (невидим), тень и позиционируется по центру родителя.

По hover на родителе через JQ, дочерний растягивается на ширину и высоту родителя. Все бы хорошо, но тень уходит под границы родительского блока.

Поломал всю голову, не могу придумать, как показать тень за пределами родителя.

Html:

<div class="main-social-3">
    <div class="main-social-3-1">
        <table>
            <tr>
                <td>
                    <img class="img-responsive" src="/img/all-partners-1.jpg" alt="" />
                </td>
            </tr>
        </table>
    </div>
    <p>Maxi card</p>
    <span>Партнер</span>
    <div class="main-social-3-hover"></div>
</div>

CSS:

.main-social-3 {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 45px;
    position: relative;
    border: 1px solid blue;
}

.main-social-3-hover {
    -webkit-box-shadow: 0px 0px 29px 1px rgba(173,171,173,1);
    -moz-box-shadow: 0px 0px 29px 1px rgba(173,171,173,1);
    box-shadow: 0px 0px 29px 1px rgba(173,171,173,1);
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
}

JQuery:

$(".main-social-3").hover(function () {
    $(this).find(".main-social-3-hover").animate({
        height: '100%',
        width: '100%',
        left: '0',
        top: '0'
    })
}, function () {
    $(this).find(".main-social-3-hover").animate({
        height: '0',
        width: '0',
        left: '50%',
        top: '50%'
    })
})

Вижу единственный выход - дочерний сделать поверх родителя при том, что он внутри.

Как реализовать подобное?

введите сюда описание изображения

3
  • Добавьте ваш код, чтобы можно было понять что не так с вашим кодом 10 июл 2018 в 10:17
  • Покажите ваш код? 10 июл 2018 в 10:17
  • Да, извините, код прикрепил. 10 июл 2018 в 10:22

2 ответа 2

1

Можно к родителю добавить overflow: hidden;

$(".main-social-3").hover(function() {
  $(this).find(".main-social-3-hover").animate({
    height: '100%',
    width: '100%',
    left: '0',
    top: '0'
  })
}, function() {
  $(this).find(".main-social-3-hover").animate({
    height: '0',
    width: '0',
    left: '50%',
    top: '50%'
  })
})

$(".main-social-2").hover(function() {
  $(this).find(".main-social-3-hover").animate({
    height: '100%',
    width: '100%',
    left: '0',
    top: '0'
  })
}, function() {
  $(this).find(".main-social-3-hover").animate({
    height: '0',
    width: '0',
    left: '50%',
    top: '50%'
  })
})
.main-social-3 {
  width: 25%;
  float: left;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 45px;
  position: relative;
  border: 1px solid blue;
  overflow: hidden;
}

.main-social-2 {
  width: 25%;
  float: left;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 45px;
  position: relative;
  border: 1px solid blue;
}

.main-social-3-hover {
  -webkit-box-shadow: 0px 0px 29px 1px rgba(173, 171, 173, 1);
  -moz-box-shadow: 0px 0px 29px 1px rgba(173, 171, 173, 1);
  box-shadow: 0px 0px 29px 1px rgba(173, 171, 173, 1);
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-social-3">
  <div class="main-social-3-1">
    <table>
      <tr>
        <td>
          <img class="img-responsive" src="/img/all-partners-1.jpg" alt="" />
        </td>
      </tr>
    </table>
  </div>
  <p>Maxi card</p>
  <span>Без тени</span>
  <div class="main-social-3-hover"></div>
</div>


<div class="main-social-2">
  <div class="main-social-3-1">
    <table>
      <tr>
        <td>
          <img class="img-responsive" src="/img/all-partners-1.jpg" alt="" />
        </td>
      </tr>
    </table>
  </div>
  <p>Maxi card</p>
  <span>С тенью</span>
  <div class="main-social-3-hover"></div>
</div>

4
  • Ничего не поменялось. Игрался с оверфло и раньше. 10 июл 2018 в 10:43
  • Добавил второй вариант, в первом нет тени от дочернего элемента (добавлен overflow:hidden), а во втором есть тень (нет overflow:hidden). Если вы раньше пробовали изменить данное свойство, то возможно у вас что-то влияло на него еще. 10 июл 2018 в 10:45
  • 1
    Это можно на css сделать.
    – Qwertiy
    10 июл 2018 в 10:53
  • Спасибо, где-то в коде нашел overflow: hidden. Убрал и все ОК ) 10 июл 2018 в 10:58
1

Скрипты не нужны:

section {
  display: inline-block;
  width: 25%;
  border: 1px solid red;
  box-sizing: border-box;
  position: relative;
}

section:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  padding-top: 100%;
}

section > div {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  text-align: center;
}

section:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  right: 50%;
  bottom: 50%;
  z-index: -1;
  box-shadow: 0px 0px 29px 1px rgba(173, 171, 173, 1);
  transition: all 300ms linear;
}

section:hover:after {
  left: -1px;
  top: -1px;
  right: -1px;
  bottom: -1px;
}
<section><div>
  Какой-то блок...
</div></section><section><div>
  Второй...
</div></section><section><div>
  Третий...
</div></section><section><div>
  Четвёртый...
</div></section>

PS: https://ru.stackoverflow.com/a/468550/178988

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.