- Метки дополнения:
- web дизайн
- css
- изображения
CSS: увеличение изображения при наведении курсора
CSS: увеличение изображений при наведении курсора мыши на миниатюру
Данная методика позволяет организовать вывод миниатюр на странице, которые при наведении курсора мыши будет увеличиваться до оригинального размера. Только одно изображение нужно для работы метода. Код CSS избавляет вас от рутинной работы по подготовке миниатюр. Также возможно сделать текстовую подпись под большим изображением.
CSS: Ниже приведенный код нужно добавить в раздел HEAD вашей страницы:
<style type="text/css"> /* Код увеличителя начинается здесь */ /* Если ваше изображение не связано ссылкой с другой страницей, оставьте ссылку в виде <a href="#nogo"> Иначе увеличительне будет работать в IE6 */ .ienlarger { float: left; clear: none; /* Можно установить left или right по необходимости */ padding-bottom: 5px; /* Расстояние между миниатюрами. Лучше не трогать данное поле */ padding-right: 5px; /* Расстояние между миниатюрами и окружающим текстом */ } .ienlarger a { display:block; text-decoration: none; /* Если добавить правило cursor:default;, то отключится курсор в виде руки */ } .ienlarger a:hover{ /* Не надо изменять тип позиционирования */ position:relative; } .ienlarger span img { border: 1px solid #FFFFFF; /* Добавляем рамку вокруг изображения */ margin-bottom: 8px; /* /Сдвигаем текст вниз от изображения */ } .ienlarger a span { /* Для большого изображения и названия */ position: absolute; display:none; color: #FFCC00; /* Текст названия */ text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; /* Размер шрифта названия */ background-color: #000000; font-weight: bold; padding-top: 10px; padding-right: 10px; padding-bottom: 13px; padding-left: 10px; } .ienlarger img { /* Для IE, чтобы не было рамки вокруг ссылки */ border-width: 0; } .ienlarger a:hover span { display:block; top: 50px; /* Большое изображение выскакивает вверх на 50px от миниатюры */ left: 90px; /* Большое изображение выскакивает влево на 90px от миниатюры */ z-index: 100; /* Если добавить правило cursor:default;, то отключится курсор в виде руки на большом изображении */ } .resize_thumb { width: 150px; /* Вводим нужный размер миниатюры здесь */ height : auto; } /* Код увеличителя закончен */ </style>
HTML:
<div class="ienlarger"><a href="http://ruseller.com"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span> <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br /> Текст можно написать здесь.</span></a></div> <div class="ienlarger"><a href="http://www.google.co.uk/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span> <img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br /> Текст можно написать здесь.</span></a></div> <div class="ienlarger"><a href="http://www.facebook.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span> <img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br /> Текст можно написать здесь.</span></a></div> <div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span> <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br /> Текст можно написать здесь.</span></a></div> <br style="clear:left" />
5 последних добавленных файлов в рубрике"Полезное"
-
5 самых полезных расширений Google Chrome для веб-дизайнера и разработчика
В этой статье мы собрали список самых лучших и полезных расширений Google Chrome для веб-дизайнеров и разработчиков.
-
5 самых популярных плагинов WordPress для режима технического обслуживания
В этой статье мы хотели бы рассказать про самые лучшие плагины WordPress для режима технического обслуживания, которую вы можете включить на своем сайте в рамках обслуживания, разработки и так далее...
-
10 очень полезных плагинов для работы с виджетами на WP
Возможность использовать боковые виджеты добавляет удобства и функциональности в WordPress. Виджеты могут предоставлять широкий спектр функций, которые помогают пользователям находить необходимую информацию, делиться своим контентом и получать больше пользы от взаимодействия с сайтом. Помимо этого, в настоящее время существует больше способов, чем когда-либо, расширить возможности использования и внедрения виджетов на вашем сайте.
-
10+ лучших бесплатных шрифтов для кодирования и программирования
С этим постом я просто хотел выделить некоторые из лучших бесплатных моноширинных шрифтов, которые были оптимизированы для программирования, а также предложить некоторые основные указатели для выбора определенного шрифта.
-
10 бесплатных плагинов для WordPress для добавления и расширения карт
10 бесплатных плагинов WordPress, которые позволят вам как добавлять, так и расширять функциональность карты на вашем сайте.