Как сделать такие кнопки?
andarky Дата: Вторник, 27 Января 2015, 09:14 | Сообщение # 1
старожил
Сейчас нет на сайте
вот тут интересно сделано портфолио. по дизайну так себе, а работы их вообще не стоят внимания...
Моя страничка по дизайну GameDev//Design//3D Ютубчик
Milfy Дата: Вторник, 27 Января 2015, 09:38 | Сообщение # 2
участник
Сейчас нет на сайте
какие именно кнопки
andarky Дата: Вторник, 27 Января 2015, 10:00 | Сообщение # 3
старожил
Сейчас нет на сайте
там ниже раздел Недавние работы наводишь мыш - и оно зумится и текст поверх. Работает и в андроиде тоже. Это что? бэкграунд в диве?
Моя страничка по дизайну GameDev//Design//3D Ютубчик
LunarPixel Дата: Вторник, 27 Января 2015, 10:11 | Сообщение # 4
старожил
Сейчас нет на сайте
На CSS делается элементарно, при как hover эффект. Через transition и transform, например, если картинку ставить через img. Либо transition и background-size, если картинку ставить как фон у div.
andarky Дата: Вторник, 27 Января 2015, 10:52 | Сообщение # 5
старожил
Сейчас нет на сайте
LunarPixel , ну да, вам элементарно. А я в CSS вообще не очень, с JS разобрался бы. Это какая-то загтовка? или самописный элемент? они же все такие активные крутятся в карусели. Мне хотя бы без карусели. Что гуглить то? zoom image onHover CSS
Моя страничка по дизайну GameDev//Design//3D Ютубчик
LunarPixel Дата: Вторник, 27 Января 2015, 11:00 | Сообщение # 6
старожил
Сейчас нет на сайте
andarky , я же написал, что гуглить. И по количеству вопросов по сайтам думал, что вы в этом хоть как-то разбираетесь. Как самый минимум, попробуйте в html сохранить и протестировать. Только картинку на свою заменить не забудьте. Код
<style> .scale { transition: all 0.5s; } .scale:hover { transform: scale(1.5); } </style> <div> <img class="scale" src="image.png" alt=""> </div>
Код
<style> .out { position: relative; width: 600px; height: 500px; overflow: hidden; } .scale { position: absolute; transition: all 0.5s; width: 100%; height: 100%; o } .out:hover .scale{ transform: scale(1.5); } .text { position: relative; z-index: 10; opacity: 0; color: #fff; transition: all 0.5s; width: 100%; height: 100%; background: rgba(0,0,0,0.5); padding: 20px; } .out:hover .text{ opacity: 1; } </style> <div class="out"> <img class="scale" src="image.png" alt=""> <div class="text">Какой-то текст! Какой-то текст! Какой-то текст! Какой-то текст! Какой-то текст! Какой-то текст! Какой-то текст! Какой-то текст!</div> </div>
Milfy Дата: Вторник, 27 Января 2015, 11:43 | Сообщение # 7
участник
Сейчас нет на сайте
в гугле есть примеры. вот например
andarky Дата: Вторник, 27 Января 2015, 15:54 | Сообщение # 8
старожил
Сейчас нет на сайте
Milfy , LunarPixel , спасибо++ ! помогли мне Milfy , не совсем то, но для другого пригодится. Правда в IE8 мертво, на Android не пробовал...
Моя страничка по дизайну GameDev//Design//3D Ютубчик