16:02 Изображения с переходом | |
Изображения с ссылкой и эффектом в виде заголовка при наведении курсора и перехода на страницу контента. Код
<!DOCTYPE html>
<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Фотография с подсказкой </title> <link rel="stylesheet" type="text/css" href="http://www.novickiy.ru/demo/viewvernissage/style.css" /> <script type="text/javascript" src="http://www.novickiy.ru/demo/viewvernissage/javascript/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("a.link").hover(function(){ $(this).find(".name").stop().animate({ bottom: 0}, 300); }, function(){ $(this).find(".name").stop().animate({ bottom: -30}, 150); }); }); </script> </head> <body> <div id="center"> <a href="http://www.artnov7.ru/photo/pejzazh/2" class="link"><img src="http://www.artnov7.ru/_ph/2/2/799540737.jpg?1410262272" alt="природа"><span class="name">Природа</span></a> <a href="http://www.artnov7.ru/photo/gollandskij_pejzazh/3" class="link"><img src="http://www.artnov7.ru/_ph/3/2/528805357.jpg?1410262304" alt="Голландский пейзаж"><span class="name">Голландский пейзаж</span></a> <a href="http://www.artnov7.ru/photo/morskie_pejzazhi/4" class="link"><img src="http://www.artnov7.ru/_ph/4/2/765584966.jpg?1410262368" alt="Морские пейзажи"><span class="name">Морские пейзажи</span></a> <a href="http://www.artnov7.ru/photo/natjurmort/5" class="link"><img src="http://www.artnov7.ru/_ph/5/2/278913001.jpg?1410262220" alt="Натюрморт"><span class="name">Натюрморт</span></a> <a href="http://www.artnov7.ru/photo/zhanrovaja_zhivopis/6" class="link"><img src="http://www.artnov7.ru/_ph/6/2/894080587.jpg?1410262445" alt="Жанр"><span class="name">Жанр</span></a> <a href="http://www.artnov7.ru/photo/sankt_peterburg/7" class="link"><img src="http://www.artnov7.ru/_ph/7/2/25678332.jpg?1410262628" alt="Санкт Петербург"><span class="name">Петербург</span></a> <a href="http://www.artnov7.ru/photo/abstrakt/8" class="link"><img src="http://www.artnov7.ru/_ph/8/2/583525652.jpg?1410262877" alt="Абстракт"><span class="name">Абстракт</span></a> <a href="http://www.artnov7.ru/photo/cvety/18" class="link"><img src="http://www.artnov7.ru/_ph/18/2/508663473.jpg?1410262929" alt="Цветы"><span class="name">Цветы</span></a> <a href="http://www.artnov7.ru/photo/izobrazhenija/17" class="link"><img src="http://www.artnov7.ru/_ph/17/2/503255734.jpg?1410263007" alt="Изображения"><span class="name">Изображения</span></a> <a href="http://www.artnov7.ru/photo/khudozhniki_proshlykh_let/19" class="link"><img src="http://www.artnov7.ru/_ph/19/2/544214833.jpg?1410263089" alt="Художники"><span class="name">Художники</span></a> <a href="http://www.artnov7.ru/photo/foto/20" class="link"><img src="http://www.artnov7.ru/_ph/20/2/578633663.jpg?1410263154" alt="Фото"><span class="name">Фото</span></a> <a href="http://www.artnov7.ru/photo/oboi/21" class="link"><img src="http://www.artnov7.ru/_ph/21/2/18022852.jpg?1410263239" alt="Обои"><span class="name">Обои</span></a> </div> </body> </html>
| |
|
Категория: Веб дизайн |
Просмотров: 3000 |
1 голос
| |
| Всего комментариев: 0 | |