Всё для дизайна

Объявление

Посетите форум о кошках

Советы по уходу, воспитанию, разведению.
Обсуждение всех пород.
Объявления о продаже/покупке котят

Форум кошек города Владивостока
Добавь в закладки

Обмен баннерами

Форум: Всё для дизайна

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Всё для дизайна » Уроки Web-дизайна » Эффект поднятия картинки, под которой текст.


Эффект поднятия картинки, под которой текст.

Сообщений 1 страница 2 из 2

1

Создание классного эффекта при наведении мышки на изображение

В этом уроке пойдет речь о том, как сделать так, чтобы под изображением находился необходимый текст, и при наведении мышкой на изображений, этот текст красиво занимал место изображения.

Все будет проделано благодаря замечательному фреймворку jQuery.

Предпросмотр: ЗДЕСЬ
Исходники: ЗДЕСЬ

Как всегда, в самом верху документа подключаем фреймворк, стили, другие скрипты. Не забываем про относительные пути к этим файлам.

Код:
<link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/style.css" />
  
  <script type="text/javascript" src="jquery.min.js"></script>
  <title>Untitled Document</title>
  
  <script type="text/javascript">
      $(function() {
      $(".slideBox").hover(function(){
      $(this).find("img").stop().animate({
      top:-325
      }, 500);
      }, function(){
      $(this).find("img").stop().animate({
      top:0
      }, 500);
      });
      });
 </script>

Теперь в теле документа нам необходимо в слой с классом "slideBox" поместить изображение и текст под ним. Текст в свою очередь должен находится внутри <div> с классом "content":

Код:
<div id="container">
      
  <div class="slideBox">
  <img src="images/picture1.jpg" alt="testing" />
  
  <div class="content">
  <h1>HTML Ipsum Presents</h1>
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  </div>
  
  </div>
  </div><!--end slideBox-->
  
  <div class="slideBox">
  <img src="images/picture2.jpg" alt="testing" />
 <div class="content">
  <h1>HTML Ipsum Presents</h1>
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  </div>
 </div>
  </div><!--end slideBox-->
  
  </div><!--end container-->

Как Вы видите под картинкой может быть не просто текст, а полноценный HTML код.

Урок подготовлен: http://ruseller.com
Источник урока: suciuvlad.com

0

2

Чтобы фото чуть-чуть приподнималось, на определенную высоту,

Можно в

$(this).find("img").stop().animate({ top:-325 вот эту цифру сменить на другую, должно помочь.

0


Вы здесь » Всё для дизайна » Уроки Web-дизайна » Эффект поднятия картинки, под которой текст.