Веб-дизайнеру
Веб-разработчику
Дополнительно
CSS3 увеличение изображения при наведении
Скачать
Демо
↓ Также Вам будет интересно ↓
Сегодня я расскажу Вам, как создать CSS3 увеличение изображения при наведении. Я думаю, что Вы уже встречали способ, как это реализовать с помощью JavaScript. Но я постараюсь сделать что-то подобное с использованием только лишь одного CSS3. В результате мы будем иметь 9 изображений, каждое из которых будет иметь собственный эффект при наведении. Этот эффект, думаю, будет особенно полезен для сайта, который имеет галерею изображений или же просто портфолио.
HTML код
Во-первых, подготовим основную структуру HTML для нашей демонстрационной галереи. Как вы видите, сама структура довольно проста – набор DIV объектов. Каждый из них, внутри содержит одно изображение и одну виртуальную маску div. Только одно последнее изображение будет иметь две маски.
|
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 |
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>CSS3 увеличение изображения при наведении | Vladmaxi.net</title> <link href="/web-developer/css/css/layout.css" rel="stylesheet" type="text/css" /> <link href="/web-developer/css/css/gall.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- галерея изображений --> <div class="photos"> <div> <img src="/web-developer/css/images/pic1.jpg" /> <div></div> </div> <div> <img src="/web-developer/css/images/pic2.jpg" /> <div></div> </div> <div> <img src="/web-developer/css/images/pic3.jpg" /> <div></div> </div> <div> <img src="/web-developer/css/images/pic4.jpg" /> <div></div> </div> <div> <img src="/web-developer/css/images/pic5.jpg" /> <div></div> </div> <div> <img src="/web-developer/css/images/pic6.jpg" /> <div></div> </div> <div> <img src="/web-developer/css/images/pic7.jpg" /> <div></div> </div> <div> <img src="/web-developer/css/images/pic8.jpg" /> <div></div> </div> <div class="pair"> <img src="/web-developer/css/images/pic9.jpg" /> <div></div> <div></div> </div> </div> </body> </html> |
CSS стили
Описывать файл layout.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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
.photos { width: 945px; height: 400px; margin: 100px auto; position:relative; } .photos > div { background-color: rgba(128, 128, 128, 0.5); border: 2px solid #444; float: left; height: 100px; margin: 5px; overflow: hidden; position: relative; width: 300px; z-index: 1; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-transform:scale(1.0); -moz-transform:scale(1.0); -ms-transform:scale(1.0); -o-transform:scale(1.0); transform:scale(1.0); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .photos > div img{ width: 100%; } .photos > div:hover{ z-index: 10; -webkit-transform:scale(2.0); -moz-transform:scale(2.0); -ms-transform:scale(2.0); -o-transform:scale(2.0); transform:scale(2.0); } .photos > div div { background: url(../images/hover.gif) repeat scroll 0 0 transparent; cursor: pointer; height: 100%; left: 0; opacity: 0.5; position: absolute; top: 0; width: 100%; z-index: 15; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .photos > div:nth-child(1):hover div { height: 0%; } .photos > div:nth-child(2):hover div { height: 0%; margin-top: 100px; } .photos > div:nth-child(3):hover div { width: 0%; } .photos > div:nth-child(4):hover div { margin-left: 300px; width: 0%; } .photos > div:nth-child(5):hover div { height: 0%; margin-left: 150px; margin-top: 50px; width: 0%; } .photos > div:nth-child(6):hover div { margin-left: 150px; width: 0%; } .photos > div:nth-child(7):hover div { height: 0%; margin-left: 150px; margin-top: 50px; width: 0%; -webkit-transform: rotateX(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } .photos > div:nth-child(8):hover div { height: 0%; margin-left: 150px; margin-top: 50px; width: 0%; -webkit-transform: rotateZ(600deg); -moz-transform: rotateZ(600deg); -ms-transform: rotateZ(600deg); -o-transform: rotateZ(600deg); transform: rotateZ(600deg); } .photos > div.pair div { width: 50%; } .photos > div.pair div:nth-child(odd) { margin-left: 150px; } .photos > div.pair:hover div { width: 0%; } .photos > div.pair:hover div:nth-child(odd) { margin-left: 300px; } |
Ну что, я думаю этот эффект бал Вам интересен, и Вы найдете ему применение на своем сайте.
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
Отличная статья, никак не могла найти то что нужно и вот нашла, спасибо!
Мне очень пригодилась))))))
/
Здравствуйте! Приятно, что данный материал был Вам полезен,
Заглядывайте к нам почаще, и надеюсь найдёте ещё много интересного и полезного для себя;)