Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
Blok1
7 / 7 / 5
Регистрация: 24.02.2014
Сообщений: 257
1

При наложении на картинку анимации, двигается и текст под ней

22.03.2015, 20:27. Просмотров 1193. Ответов 10
Метки нет (Все метки)

Приветствую, возник такой вопрос.
Используя анимацию на картинку. Под ней двигается так же и текст, а как зафиксировать текст?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<section class="try">
        <div class="content">
            <div class="main-icons">
                <div class="bloki">
                    <div class="icons icons-1"></div>
                    <span class="zag">Логотип</span>
                </div>
                <div class="bloki">
                    <div class="icons icons-2"></div>
                    <span class="zag">Информация о компании</span>
                </div>
                <div class="bloki">
                    <div class="icons icons-3"></div>
                    <span class="zag">Адреса и карта с расположением вашей компании</span>
                </div>
                <div class="bloki">
                    <div class="icons icons-4"></div>
                    <span class="zag">Информация о компании</span>
                </div>
            </div>
        </div>
    </section>
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
.try .bloki{
    width: 146px;
    height: 200px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin-left: 90px;
}
.try .zag{
    word-wrap:break-word;
    display: block;
}
.try .main-icons{
    width: 960px;
    height: 400px;
    text-align: center;
}
.try .icons{
    background-image: url(../imgmin/variants-list-min.png);
    text-align: center;
    display: block;
    webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.try .icons-1, .icons-2,.icons-3,.icons-4{
    width: 106px;
    height: 106px;
    margin: 0 auto 0 auto;
}
.try .icons-1{background-position: 0 0;}
.try .icons-2{background-position: -106px 0;}
.try .icons-3{background-position: -212px 0;}
.try .icons-4{background-position: -318px 0;}
.try .bloki:hover .icons{
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
    margin-top: -10px;
    margin-bottom: 37px;
};
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
22.03.2015, 20:27
Ответы с готовыми решениями:

При клике менять картинку и текст под ней
Я недели две назад начал изучатьjavaScript и столкнулся с такой проблемой:не получается добавить...

Разброс координат при наложении текста на картинку
Проблема такая при наложении текста на картинку происходит разброс, то есть текст не центрируется,...

Почему текст двигается при прокрутке?
Здравия, с Новым Годом! У меня проблемка, текст двигается вместе с ползунком, а мне надо чтобы...

Зафиксировать картинку на детали при анимации solidworks 2012
Наложил картинку на деталь. При анимации (в процесе разнесения сборки) деталь перемещается а...

Как при нажатии на картинку открыть текст и картинку?
Здравствуйте. У меня есть маленькие треугольники (см вложение), при нажатии на который, должен...

10
Fedor92
Эксперт HTML/CSS
2934 / 2497 / 1063
Регистрация: 15.12.2012
Сообщений: 9,390
Записей в блоге: 9
22.03.2015, 22:29 2
Как бы мой вариант развития событий... testcyb.rar
1
Blok1
7 / 7 / 5
Регистрация: 24.02.2014
Сообщений: 257
22.03.2015, 22:50  [ТС] 3
Fedor92, Да, но помимо обычной прокрутки, я хочу, чтобы еще эмблемка вверх на 10-20 пикселей поднималась... Что у тебя не рботает
0
Fedor92
Эксперт HTML/CSS
2934 / 2497 / 1063
Регистрация: 15.12.2012
Сообщений: 9,390
Записей в блоге: 9
22.03.2015, 22:54 4
У меня всё работает - просто надо код правильно читать... Уберите margin - top у icons и взлетит Ваш вертолёт - это же очевидно...
0
22.03.2015, 22:54
Blok1
7 / 7 / 5
Регистрация: 24.02.2014
Сообщений: 257
22.03.2015, 22:56  [ТС] 5
Fedor92, дак я полностью вашу версию открыл, и сужу по ней. В ней не взлетает)
0
Fedor92
Эксперт HTML/CSS
2934 / 2497 / 1063
Регистрация: 15.12.2012
Сообщений: 9,390
Записей в блоге: 9
22.03.2015, 22:58 6
Цитата Сообщение от Blok1 Посмотреть сообщение
Fedor92, дак я полностью вашу версию открыл, и сужу по ней. В ней не взлетает)
Ну я же привожу общий код - если хотите, чтобы иконки взлетали уберите [B]margin-top[/B ] прописанный внутри html для icons и будет Вам счастье...
0
Blok1
7 / 7 / 5
Регистрация: 24.02.2014
Сообщений: 257
22.03.2015, 23:02  [ТС] 7
Fedor92,
CSS
1
2
3
4
5
6
7
8
9
[CSS].try .bloki:hover .icons{
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
    margin-top: -10px;
    margin-bottom: 37px;
};
[/CSS]
Здесь?
0
Fedor92
Эксперт HTML/CSS
2934 / 2497 / 1063
Регистрация: 15.12.2012
Сообщений: 9,390
Записей в блоге: 9
22.03.2015, 23:03 8
Здесь... www.rar
0
Blok1
7 / 7 / 5
Регистрация: 24.02.2014
Сообщений: 257
22.03.2015, 23:05  [ТС] 9
Fedor92, Что это такое)
И к тому же, при наведении на текст, анимация не срабатывает.
А я хочу, чтобы срабатывала..
0
Fedor92
Эксперт HTML/CSS
2934 / 2497 / 1063
Регистрация: 15.12.2012
Сообщений: 9,390
Записей в блоге: 9
22.03.2015, 23:08 10
Лучший ответ Сообщение было отмечено Blok1 как решение

Решение

Цитата Сообщение от Blok1 Посмотреть сообщение
А я хочу, чтобы срабатывала..
Вам не угодишь... testcyb.rar

Не по теме:

Без топора не выловишь и рыбку из пруда...

1
Blok1
7 / 7 / 5
Регистрация: 24.02.2014
Сообщений: 257
22.03.2015, 23:11  [ТС] 11
Fedor92, о, в точку)
Огромное спасибо) шутник
0
22.03.2015, 23:11
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.03.2015, 23:11

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

Поместить текст под картинку
Как можно поместить текст под картинку? &lt;table class=&quot;table_folder&quot;&gt; &lt;tr&gt; &lt;td&gt;&lt;a...

Как положить картинку под текст?
Нашел такой тег, но мне не совсем понятно, как им пользоваться. &lt;div style=&quot;background:...


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

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

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