Как добавить такую тень к блоку на Bootstrap?

Question

[Андрей Неумыванный]

<div class="models pt-5 container">
        <div class="row">
            <div class="d-flex justify-content-center col-xl-4 col-md-4 col-cm-12">
                <div class="text-center ">
                    <img class="img-fluid" src="img/iPhone.png" alt="iPhone">
                    <p class="pt-4">iPhone</p>
                </div>
            </div>
            <div class="d-flex justify-content-center col-xl-4 col-md-4 col-cm-12">
                <div class="text-center">
                    <img class="img-fluid" src="img/iPad.png" alt="iPad">
                    <p class="pt-4">iPad</p>
                </div>
            </div>
            <div class="d-flex justify-content-center col-xl-4 col-md-4 col-cm-12">
                <div class="text-center ">
                    <img class="img-fluid" src="img/macbook1.png" alt="macbook1">
                    <p class="pt-4">MacBook</p>
                </div>
            </div>
        </div>
    </div>

Как добавить такую тень при hover, ведь она добавляется ко всему блоку div

Вот так получится если к блоку добавить

Comments

[Павел Лебедев]

.d-flex:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

[Андрей Неумыванный]

Павел Лебедев,

[Андрей Неумыванный]

Павел Лебедев, нужно как то уменьшить блок

[Павел Лебедев]

Andy8888, ну так вопрос заключался в тени при наведении, а не в размерах блока. Параметр width отвечает за ширину, но помните про адаптив!

[Андрей Неумыванный]

Павел Лебедев, обернул в еще один div и добавил ему width

[Павел Лебедев]

Andy8888, все получилось?

[Андрей Неумыванный]

Павел Лебедев, да, все огонь)

[Павел Лебедев]

Andy8888, ну тогда ответ отметь ;-)

Answer 1

[Павел Лебедев]

.d-flex:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

Параметр width отвечает за ширину

Comments

[lexxkrt]

кто поставил лучшее решение вашему предложению? ваше решение это худшее что можно предложить. вы меняете стандартный класс во всей системе bootstrap, вместо того чтобы внедрить новый класс, например hover, shadow-hover, box-shadow-hover, ну или как хотите назовите. и меняйте что хотите не трогая основные классы. потом просто там где надо выделять блок дополняете класс .hover

Answer 2

[Andrej Sharapov]

Просто подберите какая вам больше нравится https://madeas.github.io/box-shadows/ или напишите свои стили

Comments

[Андрей Неумыванный]

дело не в тени, я знаю как ее добавить, дело в блоке

[Andrej Sharapov]

Andy8888, так измените просто ширину блока

Answer 3

[leni_m]

Выставите правильные размера блока.
P.S. Используйте панель разработчика в браузере(обычно f12 или правой кнопкой по блоку->посмотреть код элемента) супер удобная вещь! Наводите на ваши элементы и браузер все вам расскажет (подсвечивает разными цветами границы, отступы и размеры блока) а также показывает какие стили применяются к элементу и дает возможность динамически их менять прямо на лету и смотреть результат.
Ну так вот, смотрите на ваш блок из браузера и решайте, что вам нужно:
Изменить размеры этого блока или обернуть его содержимое в еще один блок и уже его размеры менять.