Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
0 / 0 / 0
Регистрация: 21.03.2020
Сообщений: 3
1

Как сделать так, чтоб при наведении на блок всплывал еще один блок?

21.03.2020, 20:01. Просмотров 1206. Ответов 4
Метки css, html (Все метки)


Всем привет, подскажите пожалуйста как можно сделать вот такой блок
https://cdn1.radikalno.ru/uplo... f-full.png
Направьте хоть с чего начать, может примеры кода есть, чтоб посмотреть , а то идей нет совсем, заранее спасибо
вот код того что есть
HTML5
1
2
3
4
5
 <div class="card1">
                <div class="img-background">
                   <a href="#" class="card-img"><img src="img/card1.png" alt="Shopping Tours"><span class="card-link">Shopping Tours</span></a>
                </div>
            </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.card1{
    width: 314px;
    height: 262px;
    border: 1px solid white;
}
.img-background{
    width: 314px;
    height: 205px;
    background: #FFFFFF;
    border: 2px solid #000000;
    box-sizing: border-box;
    box-shadow: 0px 17px 24px #000000;
    }
 
.card-img{
    text-decoration: none;
    font-family: Roboto, sans-serif;
    font-size: 18px;
    line-height: 21px;
    color: #FFFFFF;
    display: block;
    width: 307px;
    height: 200px;
    margin-top: 3px;
}
.card-link{
    display: block;
    width: 100%;
    line-height: 58px;
    text-align: center;
}
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.03.2020, 20:01
Ответы с готовыми решениями:

При наведении на один блок, появляется другой блок и прячется если на блок не наводить
Как тут

Как мне сделать так чтоб блок грязи через некоторое время превратился в блок травы?
Добрый день!Я недавно начал делать игру наподобие майнкрафт но у меня вопрос на счет травы и земли,...

Как сделать чтобы при наведении на блок 1 скрывался навсегда блок 2
Здравствуйте! #block_1:hover #block_2{display:none;} Сейчас у меня так стоит, навожу мышь на блок...

Как сделать так, что бы при наведении мышкой на блок меню, он становился бы другого цвета
Добрый вечер. Помогите пожалуйста. Есть меню, нужно сделать так, что бы при наведении на вкладку...

__________________
Помогаю в написании курсовых работ и дипломов здесь.
4
Developer☭
139 / 83 / 18
Регистрация: 01.02.2019
Сообщений: 408
21.03.2020, 20:06 2
Вы имеете ввиду модальное окно? Или что бы при наведении рядом с элементом возникал ещё один блок?
0
0 / 0 / 0
Регистрация: 21.03.2020
Сообщений: 3
21.03.2020, 20:10  [ТС] 3
Ну у меня есть макет, и в нем вот такие блоки с картинками, одни показаны без наведения на них, а один показан как должно быть при наведении на один из 6ти блоков, извиняюсь если нечетко формулирую мысль

https://cdn1.radikalno.ru/uplo... c-full.png
0
Developer☭
139 / 83 / 18
Регистрация: 01.02.2019
Сообщений: 408
21.03.2020, 22:01 4
Лучший ответ Сообщение было отмечено Oleg_F как решение

Решение

HTML5
1
2
3
4
5
<div class="block">
  <div class="img"></div>
  <div class="text">ТЕКСТ ТЕКСТ ТЕКСТ</div>
  <div class="block_drop">-----------\|/-----------\|/-----------\|/-----------\|/-----------\|/-----------\|/-----------\|/-----------\|/-----------\|/-----------</div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.block {
  width: 300px;
  height: 300px;
  background-color: red;
  overflow: hidden;
 
}
 
.img {
  width: 100%;
  height: 80%;
  background-color: #000;
}
 
.text {
  width: 100%;
  height: 20%;
  background-color: #b4b4b4; 
}
 
.block_drop {
  width: 100%;
  height: 40%;
  background-color: #5751C1;
  transition-property: margin-top;
  transition-duration: .5s;
}
 
.block:hover .block_drop {
  margin-top: -40%;
 
}
Ссылка на кодпен
Криво, косо, просвечивает, z-index не помогает. Может кто более опытный сможет поправить моё нечто.

Не по теме:

ну я в принципе на скорую руку наверстал...


Но суть надеюсь вы поняли, как подобное делать.
1
0 / 0 / 0
Регистрация: 21.03.2020
Сообщений: 3
21.03.2020, 23:46  [ТС] 5
Огромнейшее спасибо, буду дальше ковырять свой код
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
21.03.2020, 23:46

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь или здесь.

только одним CSS (без Jquery) сделать так: показать блок при наведении на ссылку
при наведениии на ссылку - должен показаться div. До наведения у него был стиль : display: none;

Как сделать так, чтоб при наведении курсора картинка менялась на другую
Понимаю что вопрос глупый!) Как сделать так, чтоб при наведении курсора картинка менялась на...

Как сделать так, чтоб блок с текстом выезжал из под блока?
Приветствую! у меня есть блок в котором есть изображение, подпись и блок со скрытым текстом. Мне...

Как сделать, чтобы при наведении на блок уменьшался box-shadow фона?
Здравствуйте , суть в том что когда делал эффекты при наведение на блок , представьте такой...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.