Andy8888
@Andy8888
Frontend Developer

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

<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>


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

Вот так получится если к блоку добавить
5d287df9ba6d9289240924.png
  • Вопрос задан
  • 1238 просмотров
Решения вопроса 1
.d-flex:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

Параметр width отвечает за ширину
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Madeas
@Madeas
UI / UX Designer, Frontend Developer
Просто подберите какая вам больше нравится https://madeas.github.io/box-shadows/ или напишите свои стили
Ответ написан
leni_m
@leni_m
ЧупаКобрус
Выставите правильные размера блока.
P.S. Используйте панель разработчика в браузере(обычно f12 или правой кнопкой по блоку->посмотреть код элемента) супер удобная вещь! Наводите на ваши элементы и браузер все вам расскажет (подсвечивает разными цветами границы, отступы и размеры блока) а также показывает какие стили применяются к элементу и дает возможность динамически их менять прямо на лету и смотреть результат.
Ну так вот, смотрите на ваш блок из браузера и решайте, что вам нужно:
Изменить размеры этого блока или обернуть его содержимое в еще один блок и уже его размеры менять.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы