Эпиграф в стиле tumblr (перевод windymind)
Содержимое темы удалено.
Отредактировано супернатурал. (29-01-2014 22:23:24)
Эффекты при наведении.
Страница: 1
Сообщений 1 страница 12 из 12
Поделиться104-04-2012 22:28:47
- Blood Like Lemonade
- Зарегистрирован: 13-04-2011
- Приглашений: 0
- Сообщений: 8181
- Уважение: +3233
- Позитив: +482
- Пол: Мужской
- Провел на форуме:
1 месяц 24 дня - Последний визит:
25-05-2020 00:36:15
Поделиться220-05-2012 13:04:38
- Blood Like Lemonade
- Зарегистрирован: 13-04-2011
- Приглашений: 0
- Сообщений: 8181
- Уважение: +3233
- Позитив: +482
- Пол: Мужской
- Провел на форуме:
1 месяц 24 дня - Последний визит:
25-05-2020 00:36:15
Содержимое темы удалено.
Отредактировано супернатурал. (29-01-2014 22:23:30)
Поделиться331-05-2012 11:31:42
- я есмь клевер
- Зарегистрирован: 28-09-2011
- Приглашений: 0
- Сообщений: 42
- Уважение: +2
- Позитив: +15
- Провел на форуме:
1 день 6 часов - Последний визит:
03-11-2014 00:30:13
помогите пожалуйста. хотела сделать эффект увеличения картинки, но ничего не получается.(( куда нужно вставлять этот код? в style_cs.css? а чтобы увидеть этот эффект, нужно вставить между тегами ссылку на картинку? всё перепробовала, не получается( help 
Поделиться431-05-2012 11:36:53
- Рыжий, честный, влюбленный
- Зарегистрирован: 24-05-2012
- Приглашений: 0
- Сообщений: 205
- Уважение: +66
- Позитив: +6
- Пол: Женский
- Возраст: 30 [1993-09-11]
- Провел на форуме:
2 дня 9 часов - Последний визит:
23-02-2015 19:02:07
manri.
Здравствуйте. Во-первых, самое главное - куда именно вы вставляете картинку. Все эти коды основаны на css-правилах, они вставляются в стиль, но важно, в каком блоке именно стоят картинки.
Поделиться531-05-2012 11:46:52
- я есмь клевер
- Зарегистрирован: 28-09-2011
- Приглашений: 0
- Сообщений: 42
- Уважение: +2
- Позитив: +15
- Провел на форуме:
1 день 6 часов - Последний визит:
03-11-2014 00:30:13
.Ghоst, я пыталась и в пост и в объявление. не получается(
Поделиться631-05-2012 12:15:41
- Рыжий, честный, влюбленный
- Зарегистрирован: 24-05-2012
- Приглашений: 0
- Сообщений: 205
- Уважение: +66
- Позитив: +6
- Пол: Женский
- Возраст: 30 [1993-09-11]
- Провел на форуме:
2 дня 9 часов - Последний визит:
23-02-2015 19:02:07
manri.
В пост. Хм. Смотрите.
В стиль в самый конец второго окна.
#pun-announcement img {
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}#pun-announcement img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}
Так у вас все изображения в объявлении будут сначала помещения иметь ширину 300px и высоту 100. При наведении они будут увеличиваться.
Если вам нужен отдельный блок, в котором изображения будут так себя вести, то нужно все изображения помещать в него и задавать ему уникальный идентификатор - id
Вот так (там, где изображения)
<div id="hover_max">
<img src="">
<img src="">
<img src="">
</div>
А потом ему прописывать опять же в стиле то же самое, только селектором обращаясь не к контейнеру объявления, а к нему самому:
#hover_max img {
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}#hover_max img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}
Но, опять же, проблема в том, что изображения приходится делать фиксированной ширины и высоты. Некрасиво.
Лучше использовать для того же эффекта свойства css3 - scale, масштабирование. Тогда код будет звучать так:
#hover_max img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}#hover_max img:hover {
transform:scale(2);
-webkit-transform:scale(2);
-moz-transform:scale(2);
-o-transform:scale(2);
}
Жирным - то, во сколько раз нужно увеличить изображение. Можно сделать так: сначала помещаемое изображение пусть уменьшается вдвое, а потом увеличивается до своего нормального размера:
#hover_max img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transform:scale(0.5);
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);
}#hover_max img:hover {
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
}
Можете 0.5 поменять на большее значение, например, 0.8, если изображения покажутся вам маловаты.
Поделиться731-05-2012 14:39:44
- я есмь клевер
- Зарегистрирован: 28-09-2011
- Приглашений: 0
- Сообщений: 42
- Уважение: +2
- Позитив: +15
- Провел на форуме:
1 день 6 часов - Последний визит:
03-11-2014 00:30:13
.Ghоst, спасибо вам огромное. у меня всё получилось. +
Поделиться831-05-2012 14:41:48
- Рыжий, честный, влюбленный
- Зарегистрирован: 24-05-2012
- Приглашений: 0
- Сообщений: 205
- Уважение: +66
- Позитив: +6
- Пол: Женский
- Возраст: 30 [1993-09-11]
- Провел на форуме:
2 дня 9 часов - Последний визит:
23-02-2015 19:02:07
manri.
Не за что)
Для изображений в посте можно сделать то же самое, но тогда те же коды нужно прописывать как
.punbb .post-box img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transform:scale(0.5);
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);
}.punbb .post-box img:hover {
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
}
Поделиться931-05-2012 14:42:37
- я есмь клевер
- Зарегистрирован: 28-09-2011
- Приглашений: 0
- Сообщений: 42
- Уважение: +2
- Позитив: +15
- Провел на форуме:
1 день 6 часов - Последний визит:
03-11-2014 00:30:13
.Ghоst, спасибо)
Поделиться1031-05-2012 17:39:00
- я есмь клевер
- Зарегистрирован: 28-09-2011
- Приглашений: 0
- Сообщений: 42
- Уважение: +2
- Позитив: +15
- Провел на форуме:
1 день 6 часов - Последний визит:
03-11-2014 00:30:13
.Ghоst, а между каким тегом нужно вставлять картинку, чтобы она увеличивалась в посте? и можно ли совместить два кода: в объявлении и в посте. ничего страшного не будет?)
Поделиться1131-05-2012 17:46:47
- Рыжий, честный, влюбленный
- Зарегистрирован: 24-05-2012
- Приглашений: 0
- Сообщений: 205
- Уважение: +66
- Позитив: +6
- Пол: Женский
- Возраст: 30 [1993-09-11]
- Провел на форуме:
2 дня 9 часов - Последний визит:
23-02-2015 19:02:07
manri.
В посте можно просто вставлять картинку) Она должна сама уменьшаться и увеличиваться. Вот, на моем пробнике: http://polygon.rusff.ru/viewtopic.php?id=1#p8 при наведении, видишь, картинки увеличиваются)
Нет, совершенно ничего страшного не будет)
Поделиться1231-05-2012 20:11:24
- я есмь клевер
- Зарегистрирован: 28-09-2011
- Приглашений: 0
- Сообщений: 42
- Уважение: +2
- Позитив: +15
- Провел на форуме:
1 день 6 часов - Последний визит:
03-11-2014 00:30:13
.Ghоst, спасибо)
Страница: 1
