Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
sashok89
74 / 74 / 11
Регистрация: 04.08.2012
Сообщений: 526
Записей в блоге: 2
1

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

21.10.2014, 19:07. Просмотров 1078. Ответов 3
Метки нет (Все метки)

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

а на деле у меня получается вот что
Изменение блока при наведении на него

вот код
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. Как сделать изменение при наведение на изображение
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.10.2014, 19:07
Ответы с готовыми решениями:

Изменение фоновой картинки одного блока при наведении на другой
Добрый вечер.Верстаю макет, ломаю голову над одним моментом, а именно: Есть...

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

Увеличение блока div при наведении
Всем привет! У меня есть четыре блока div, расположенных с помощью float:...

Обрезать углы у блока при наведении
Всем привет! Помогите, как обрезать углы блока при наведении, чтобы получился...

Эффект для блока при наведении
Здравствуйте уважаемые! Хотел поставить hover на блок при наведении, получилось...

3
kloks
54 / 54 / 30
Регистрация: 08.05.2012
Сообщений: 162
21.10.2014, 19:24 2
Первое: добавить вертикальное выравнивание к картинке
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);
}
1
maximus2011
268 / 260 / 35
Регистрация: 21.02.2012
Сообщений: 1,078
21.10.2014, 19:30 3
1. Вам нужно картинку завернуть в div и ему в стилях прописать line-height:0; тогда расстояние уберется

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

а потом пишите что когда есть событие hover на div в котором картинка, показывать div который с абсолютной позицией
1
Lazy_Den
2978 / 2640 / 1334
Регистрация: 15.01.2014
Сообщений: 5,797
21.10.2014, 20:08 4
Лучший ответ Сообщение было отмечено sashok89 как решение

Решение

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;
}
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.10.2014, 20:08

Выезжающий элемент при наведении на него
Не буду давать ссылку т.к. это на одном из торрентов я увидел, вот скриншот: ...

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

Вёрстка блока с тенью, появляющегося при наведении
всем привет, ребят не подскажите как сверстать такой блок на css? при...


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

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

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