Раскрывающиеся изображения - 5 Октября 2013

Главная » 2013 » Октябрь » 5 » Раскрывающиеся изображения

15:53

Раскрывающиеся изображения

Можно установить на сайт интересные эффекты, при наведении на изображение откроется текстовая информация с ссылками. Вебмастер начинающий создавать собственный сайт ищет разные эффекты и коды для того, что бы сайт был интересен и удобен для посетителей. Но иногда нет времени или не хочется изучать основы программирования, можно заказать у мастеров, а если нет финансов на оплату заказа, есть возможность за пятнадцать минут оформить экспресс займ .
В интернете есть много готовых скриптов, кодов- HTML и т. д., которые нужно скопировать и вставить в нужное место на своём сайте.

Код

<table style="border-collapse:collapse;" width:100%;"="" align="center"><tbody><tr><td>

<style>
  {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  }
  .boxy {
position: relative;
  width: 238px;
  height: 238px;
  overflow: hidden;
  }
  .boxy-img {
  position: absolute;
  top: 0px;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  transition: all 300ms linear;
  }
  .boxy:hover .boxy-img {
  position: absolute;
  top: 238px;
  opacity: 0;
  }
  .boxy-title {
  font-weight: bold;
  text-decoration: none;
  color: #6F4A1D;
  font-size: 14px;
  }
  .boxy-more {
  background: #4fb9e6;
  display: block;
  padding: 5px;
  color: white;
  text-decoration: none;
  width: 50px;
  text-align: center;
  border: 1px solid #eee;
  }
  </style>

  <div class="boxy">
  <img src="http://www.novickiy.ru/otkrkartinki/pez.jpg" alt="Пейзажи " class="boxy-img">
  <a href="http://artnov.ucoz.com/photo/1" class="boxy-title">Пейзажи </a>
  <p>
  Пейзажи украсят любой интерьер, подчеркивая особый стиль помещения. Пейзаж можно было бы сравнить с музыкой. Цветовые оттенки, краски, передают в картине чувства, даже без ясно обозначенного сюжета. </p>
  <a href="http://artnov.ucoz.com/photo/2" class="boxy-more">Далее</a>
  </div>
</td><td>

<style>
  {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  }
  .boxy {
position: relative;
  width: 238px;
  height: 238px;
  overflow: hidden;
  }
  .boxy-img {
  position: absolute;
  top: 0px;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  transition: all 300ms linear;
  }
  .boxy:hover .boxy-img {
  position: absolute;
  top: 238px;
  opacity: 0;
  }
  .boxy-title {
  font-weight: bold;
  text-decoration: none;
  color: #6F4A1D;
  font-size: 14px;
  }
  .boxy-more {
  background: #4fb9e6;
  display: block;
  padding: 5px;
  color: white;
  text-decoration: none;
  width: 50px;
  text-align: center;
  border: 1px solid #eee;
  }
  </style>

  <div class="boxy">
  <img src="http://www.novickiy.ru/otkrkartinki/nat.jpg" alt="Натюрморт" class="boxy-img">
  <a href="http://artnov.ucoz.com/photo/3" class="boxy-title">Натюрморт</a>
  <p> Картины с видами Натюрмортов украсят любой интерьер помещения, подчеркивая особый стиль.
Картина придаст любому
помещению особый шарм.</p>
  <a href="http://artnov.ucoz.com/photo/3" class="boxy-more">Далее</a>
  </div>
</td></tr>
</tbody></table><div align="center"></div>

Пейзажи

Пейзажи украсят любой интерьер, подчеркивая особый стиль помещения. Пейзаж можно было бы сравнить с музыкой. Цветовые оттенки, краски, передают в картине чувства, даже без ясно обозначенного сюжета.

Натюрморт

Картины с видами Натюрмортов украсят любой интерьер помещения, подчеркивая особый стиль. Картина придаст любому помещению особый шарм.

Категория: Веб дизайн | Просмотров: 3367 | Добавил: artnov

6 голосов

Всего комментариев: 0