Изменение блока при наведении на него

@sashok89 · Регистрация: 04.08.2012

Студворк — интернет-сервис помощи студентам

Доброго всем вечера. Помогите разобраться с проблемой. В макете нужно сделать вот так вот

а на деле у меня получается вот что

вот код

HTML5
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
<div class="related">
                <h3>Related Posts</h3>
                <div>
                    <div class="related_img">
                        <div>
                            <img src="img/hoverimg.jpg" alt="relatedImg1">
                            <p><span>15</span>MAR</p>
                            <a href="#">magic mouse</a>
                        </div>
                    </div>
                    <div class="related_img">
                        <div>
                            <img src="img/hoverimg.jpg" alt="relatedImg2">
                            <p><span>15</span>MAR</p>
                            <a href="#">new headquarters</a>
                        </div>
                    </div>
                    <div class="related_img">
                        <div>
                            <img src="img/hoverimg.jpg" alt="relatedImg3">
                            <p><span>15</span>MAR</p>
                            <a href="#">searching new faces</a>
                        </div>
                    </div>
                </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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.related h3 {
    background: #F3F3F3;
    color: #FF4800;
    font: 1.8em "Trebuchet MS", Arial, sans-serif;
    padding: 5px 0;
    text-align: center;
    width: 140px;
}
.related {
    background: #f3f3f3;
    overflow: hidden;
}
.related .related_img div {
    float: left;
    position: relative;
    margin: 0 2%;
}       
/*.related .related_img div:first-child {
    margin-left: 5%;
}*/
.related .related_img div img {
    height: 186px;
    width: 196px;
}
.related .related_img div p {
    background: #000;
    bottom: 58px;
    color: #FFF;
    font: 1.6em Arial, sans-serif;
    left: 0;
    text-align: center;
    padding: 0 0 10px 0;
    position: absolute; 
    width: 45px;
}
.related .related_img div p span {
    display: inline-block;
    margin: 10px 0 0 0;
}
.related .related_img div a {
    background: #ff4800;
    color: #fff;
    display: block;
    font: 14px "Trebuchet MS",Arial,sans-serif;
    margin-bottom: 19px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;  
    padding: 10px 20px;
}

1. Подскажите как убрать пространство между изображение и ссылкой
2. Как сделать изменение при наведение на изображение

@kloks · 21.10.2014, 19:24

Первое: добавить вертикальное выравнивание к картинке

CSS
1
2
3
4
5
.related .related_img div img {
    height: 186px;
    width: 196px;
    vertical-align : top;
}

Второе: используй псевдокласс hover

CSS
1
2
3
.related .related_img div:hover a {
    background-color : rgb(100,100,100);
}

@maximus2011 · 21.10.2014, 19:30

1. Вам нужно картинку завернуть в div и ему в стилях прописать line-height:0; тогда расстояние уберется

2. в том же div в который обернули картинку, вставьте еще один с абсолютной позицией и скройте его через стили

а потом пишите что когда есть событие hover на div в котором картинка, показывать div который с абсолютной позицией

@Lazy_Den · 21.10.2014, 20:08

sashok89, Я бы вообще всё немного по другому сделал. Можете посмотреть мой вариант. Единственное, вместо изображения ссылки, можно было бы использовать шрифты, например, от Awesome Font. Хотя и картинкой пойдёт.

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.box {
    position: relative;
    float: left;
    display: flex;
    flex-direction: column;
    width: 200px;
    height: 200px;
    margin: 10px;
    font: 1em "Trebuchet MS", Arial, sans-serif;
    background: #a4a498;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box:before,
.box:after {
    content: '';
    position: absolute;
    z-index: -2;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    max-width: 300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}
 
.box:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
        -ms-transform:rotate(3deg);
         -o-transform:rotate(3deg);
            transform:rotate(3deg);
}
.box a {
    position: relative;
    flex: 1 1 auto;
}
.box a span {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 25%;
    padding: 7px 5px;
    background: #4f4f4f;
    text-align: center;
    color: #fff;
}
.box .footer {
    padding: 10px 5px;
    background: #ff4800;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}
.box:hover a:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    vertical-align: middle;
    background-color: #ff4800;
    text-align: center;
    z-index: 10;
}
.box:hover a:after {
    position: absolute;
    content: url([url]https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/48/link.png);[/url]
    left: 50%;
    top: 50%;
    margin-left: -24px;
    margin-top: -24px;
    z-index: 11;
}
.box:hover .footer {
    background-color: #4f4f4f;
}

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	21.10.2014, 19:30
	1. Вам нужно картинку завернуть в div и ему в стилях прописать line-height:0; тогда расстояние уберется 2. в том же div в который обернули картинку, вставьте еще один с абсолютной позицией и скройте его через стили а потом пишите что когда есть событие hover на div в котором картинка, показывать div который с абсолютной позицией 1

Изменение блока при наведении на него

Решение