resets Оптимизация и фишки css Добавлены новые фотографии в скрины
1 год назад

увеличение картинок при наведении курсора при помощи css . картинки размещены в элементе blok1
.blok1 {position: relative; cursor: pointer; display: inline-block; border: 1px solid #556B2F;}
.blok1 img + img {position:absolute; left: 40px; top:-10px; z-index:100; display: none; border: 1px solid #556B2F ; padding: 3px; border-radius:9px; background:silver; width: 180%;}
.blok1:hover img + img {display: block;}
в первой строчке настройки отображения первой картинки, во второй увеличенной или можно использовать абсолютно другую картинку, т.е. создать эффект не увеличения, а замены. ну и пример вставки на страницу
<div class="blok1"><img src="media/k2/items/cache/7a0c9d8bd9eadf879f0011817e8c2396_L.jpg" alt="розетка гладкая потолочная из гипса" border="0" height="160" width="320" /><img src="media/k2/items/cache/7a0c9d8bd9eadf879f0011817e8c2396_L.jpg" alt="гладкая розетка круглая из гипса" />
размер для отображения картинок можно указать и в стилях и непосредственно для каждой картинки индивидуально. и этот же блок можно сделать ссылкой на нужную страницу. на скрине прием с двумя разными картинками. пример в действии тут http://krovatioptom.ru/raskladushka/ естественно, что для крупных проектов, с большим количеством изображений, лучше использовать скрипты, т.к. в ручную это достаточно трудоемкий процесс #увеличение_картинки #css

image

Пожалуйста войдите или зарегистрируйтесь, чтобы добавлять "Мне нравится" и комментарии!