47 / 47 / 6
Регистрация: 20.01.2013
Сообщений: 622
|
|
1 | |
Реализовать Hover эффект26.04.2016, 14:24. Показов 1177. Ответов 11
Метки нет (Все метки)
Всем привет, чего то подтупливаю я и не могу реализовать вроде бы простой эффект.
См имагу. Обычный блок картико а ниже текст, при наведении текст убирается и картинка расширяется до конца блока, добавочный текст+ текст который был появляются на затемненном фоне не картинке) Как сие творение реализовать?
0
|
26.04.2016, 14:24 | |
Ответы с готовыми решениями:
11
Реализовать задумку hover - эффект Необходимо сделать отступы между пунктами меню и реализовать hover-эффект Hover эффект Исправить hover эффект? |
26.04.2016, 15:07 | 2 | |||||
Сообщение было отмечено Agusha3 как решение
Решение
Agusha3, надеюсь мысль впитаете :
1
|
47 / 47 / 6
Регистрация: 20.01.2013
Сообщений: 622
|
|
26.04.2016, 15:19 [ТС] | 3 |
спасибо за ответ, не совсем то, но мысля именно куда надо)))
0
|
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
|
|||||||||||
26.04.2016, 15:22 | 4 | ||||||||||
Agusha3,
2
|
47 / 47 / 6
Регистрация: 20.01.2013
Сообщений: 622
|
|
26.04.2016, 15:26 [ТС] | 6 |
вот именно это мне и нужно, сие чудо в 4-м HTML сможете написать?
Добавлено через 44 секунды думаю картинка будет натянут изначально на весь контейнер, и нижняя часть будет скрыта другим контейнером поверх основного)
0
|
26.04.2016, 15:56 | 7 |
Ну с картинкой получилась такая ржачная история...
jqueryzoom.rar А вот что делать с маской пока не понятно... Была мысль дописать две функции onmouseout и onmouseover сейчас попробую пошаманить...
0
|
26.04.2016, 17:16 | 8 |
jqueryzoom.rar
В общем вот такая канитель получилась, но что-то подсказывает, что её надо допилить...
0
|
47 / 47 / 6
Регистрация: 20.01.2013
Сообщений: 622
|
|
27.04.2016, 23:28 [ТС] | 9 |
Вопросец) а что делать, если текст длинный? Он весь не размещается в блоке и тупо скрывается. (<br> вставить возможности нет)
0
|
27.04.2016, 23:41 | 10 |
Agusha3, вариантов не так много, как хотелось бы - уменьшить шрифт, например... Но если проблема в том, что текст не переносится, то попробовать использовать черновые свойства css word-wrap:break-word или ограничить блок по ширине... Если ни один способ не подошёл надо бы посмотреть код...
0
|
47 / 47 / 6
Регистрация: 20.01.2013
Сообщений: 622
|
|
27.04.2016, 23:47 [ТС] | 11 |
да, ни один из вариантов не подошел. проблема из-за overflow:hidden. а вот как ее решить чет не понятно)
Код
<div class="wrap" data-text-1="cat" data-text-2="dog"> <img src="http://rs1152.pbsrc.com/albums/p491/mress_1701/dogsandcats.jpg~c200" alt="" > </div> Код
.wrap{ width:200px; height:200px; overflow:hidden; position:relative; font-family:Arial; } .wrap img{ display:block; max-width:100%; } .wrap:after{ content:attr(data-text-1); display:block; position:absolute; bottom:0; left:0; right:0; background:#fff; text-align:center; padding:10px; transition:all .3s; } .wrap:before{ content:attr(data-text-1) "\A and\A" attr(data-text-2); text-transform:uppercase; color:#fff; white-space: pre; opacity:0; position:absolute; left:0; right:0; top:0; display:block; padding:10px; text-align:center; transition:all .3s; } .wrap:hover:before{ opacity:1; } .wrap:hover:after{ bottom:-100%; }
0
|
28.04.2016, 00:06 | 12 |
Agusha3, ну корень зла понятен... Вариантов только три: либо постараться уместить текст - либо сделать красивую обрезку или убрать overflow...
0
|
28.04.2016, 00:06 | |
28.04.2016, 00:06 | |
Помогаю со студенческими работами здесь
12
Эффект а hover на картинке Hover эффект внутри Hover-эффект для картинки Не работает hover-эффект на изображение Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |