CSS подписи для картинок

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

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

1. Изображение с постоянно видимым описанием.

HTML - заключаем картинку и описание в div и прописываем class="img-desc"

  1. <div class="img-desc">   
  2.     <img src="sample.jpg" alt="" />   
  3.     <cite>Симпатичный диванчик. Устраивайтесь по-удобнее... </cite>   
  4. </div>  

CSS

  1. .img-desc {   
  2.     position: relative;   
  3.     display: block;   
  4.     height:335px;   
  5.     width: 575px;   
  6. }   
  7. .img-desc cite {   
  8.     background: #111;   
  9.     filter:alpha(opacity=55);   
  10.     opacity:.55;   
  11.     color: #fff;   
  12.     position: absolute;   
  13.     bottombottom: 0;   
  14.     leftleft: 0;   
  15.     width: 555px;   
  16.     padding: 10px;   
  17.     border-top: 1px solid #999;   
  18. }  

Вот, что что у нас должно получиться

Симпатичный диванчик. Устраивайтесь по-удобнее...

 

2. Изображение с всплывающим описанием

HTML

  1. <div class="imgteaser">   
  2. <a href="#">   
  3.     <img src="Daim1.jpg" alt="Daim Graffiti" />   
  4.     <span class="more">&raquo; Всем сюда...</span>   
  5.     <span class="desc">   
  6.         <strong>ПРИЕХАЛИ</strong>   
  7.         Наша турфирма доставит вас на край мира с незабываемыми ощущениями.  
  8.     </span>   
  9. </a>   
  10. </div>  

CSS

Для начала установим и настроим основсной div и его hover параметры

  1. .imgteaser {   
  2.     margin: 0;   
  3.     overflow: hidden;   
  4.     float: leftleft;   
  5.     position: relative;   
  6. }   
  7. .imgteaser a {   
  8.     text-decoration: none;   
  9.     float: leftleft;   
  10. }   
  11. .imgteaser a:hover {   
  12.     cursor: pointer;   
  13. }  

Здесь мы добавляем изображению бордюр, тобишь border

  1. .imgteaser a img {   
  2.     float: leftleft;   
  3.     margin: 0;   
  4.     border: none;   
  5.     padding: 10px;   
  6.     background: #fff;   
  7.     border: 1px solid #ddd;   
  8. }  

Теперь разберемся с кнопкой "Всем сюда"

  1. .imgteaser a .more {   
  2.     position: absolute;   
  3.     rightright: 20px;   
  4.     bottombottom: 20px;   
  5.     font-size: 1.2em;   
  6.     color: #fff;   
  7.     background: #000;   
  8.     padding: 5px 10px;   
  9.     filter:alpha(opacity=65);   
  10.     opacity:.65;   
  11.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/   
  12. }   
  13. .imgteaser a:hover .desc{   
  14.     display: block;   
  15.     font-size: 1.2em;   
  16.     padding: 10px 0;   
  17.     background: #111;   
  18.     filter:alpha(opacity=75);   
  19.     opacity:.75;   
  20.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/   
  21.     color: #fff;   
  22.     position: absolute;   
  23.     bottombottom: 11px;   
  24.     leftleft: 11px;   
  25.     padding: 10px;   
  26.     margin: 0;   
  27.     width: 566px;   
  28.     border-top: 1px solid #999;   
  29. }   
  30. .imgteaser a:hover .desc strong {   
  31.     display: block;   
  32.     margin-bottom: 5px;   
  33.     font-size:1.5em;   
  34. }  

В оригинале кнопка "Всем сюда" должна исчезать при наведении, но как обычно приходится возиться с IE6

  1. .imgteaser a .desc {    display: none; }   
  2. .imgteaser a:hover .more { visibility: hidden;}  

После всех этих манипуляций вот, что должно у нас получиться

Интересная статья? Нажми →

Не знаешь что такое RSS? Читай → здесь   

Не стесняйтесь оставлять комментарии ↓   

  Категория: Полезное • Просмотров: 21184 • Добавил: Gorus •
 
          Отзывы
1 2 »
#15
Netdruriruilm [Материал] * 09 Мар 2013
Нужна была помощь специалиста и я искал юридический центр! После чего с трудом обнаружил на http://www.consalt-centr.ru - юридический центр в Московской области
. просмотрел их веб сайт и оформил юридическую помощь. После чего юридическая информация дала о себе знать и я решил свои личностные проблемы. Теперь всем советую Юридический центр Консалт.
#14
Zubair [Материал] * 28 Фев 2013
Подбор текстов неплохой, помещу сайт в закладки.
#13
QuogsAffege [Материал] * 16 Фев 2013
Наткнулся на ссылку: http://srub-dizain.ru/articles/94-profilirovanniybrus - купить профилированный брус от производителя
и я стал задумываться о постройке нового дома! Мне как раз хотелось купить профилированный брус камерной сушки. Короче зашёл туда и поехал на их завод! Там реально всё смешно сделано и сухой профилированный брус трудно выбрать. Всему этому делу сопутствовала трудная навигация сайта, которую не мог не обнаружить.Очень круто конечно то, что это производитель бруса – но сайт тяжёлый на восприятие.
#12
Jallsweelry [Материал] * 06 Фев 2013
http://loveepicentre.com/articles.php - http://loveepicentre.com/uploades/photos/7.jpg
dating for teenagers http://loveepicentre.com/success_stories.php - when women pull away in dating dating after 40 how fast
man dating http://loveepicentre.com - adult dating middle aged women dating advice for teen boys
dating sites surrey b c http://loveepicentre.com - dating cuckoo clocks so your dating a vegan
#11
unertooge [Материал] * 06 Фев 2013
Вот вам и Январь! Вот в мэйле случайно зашёл на статью http://rentrealtycrimea.com/dlitelno/page/2/ - сдам апартаменты в Крыму
и впал в ярость. Вот теперь даже не поздоровался с Вами! В общем сдам 2-х квартиру Симферополь
,я просмотрел и осознал, что настоящая жизнь только начинается – раз есть такие квартиры. Поэтому каждому ходатайствую сайт http://rentrealtycrimea.com с апартаментами в центре Крыма.
#10
Jallsweelry [Материал] * 06 Фев 2013
http://loveepicentre.com - http://loveepicentre.com/uploades/photos/2.jpg
dating age difference http://loveepicentre.com/testimonials.php - bible and dating chris blasic profiles on dating sites
german dating service http://loveepicentre.com/ - little people dating safe dating online
christian singles dating ohio http://loveepicentre.com/map.php - eazy 100 free blacks dating site is lauren conrad dating
#9
cifscrorce [Материал] * 18 Янв 2013
online dating mingles http://loveepicentre.com/ mature singles online dating
#8
cifscrorce [Материал] * 15 Янв 2013
dating israeli women http://loveepicentre.com south florida adult dating escort service
#7
styncskaneuct [Материал] * 10 Ноя 2012
Нашёл отпугивающее предложение и впал в истерику! Теперь предлагаю его к Вашему рассмотрению: сдаю 3-х квартирку в жк http://posutochno.donetsk.ua - Донецке
Одесса. неподалёку: кафе, пляж из ольки, стоянка для авто и остров. Апартаменты со свежим дорогим ремонтом, Итальянской мебелью и недорогой бытовой техникой.
#6
Александр [Материал] * 02 Июл 2011
Почему отображается описание справа от картинки, исправьте, так как это грубая ошибка.
1-10 11-15
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
   
   
На сайте: 1
Посетители: 1
Пользователи: 0
 
 
 
Комментарии

 锘縋etaling Street

Located at the heart of the original Kuala Lumpur Chinatown, Petaling Street is a well known tourist destination. Historically, Chinatown was a popular place among locals jquamovn » 13 Июл 2014
 FISH-EMPIRE.NET - игра с выводом реальных денег. Старт проекта 31.03.2014.

Для ознакомления нажмите по ссылке: http://fish-empire.net/

Наши Особенности: Свободная статистик FishEi » 13 Апр 2014
 Заебал....А в другом городе есть проститутки? Славик » 28 Дек 2013
 Поставляем Грунт-эмаль дугостойкую ЭКП-9303ГС (красно-коричневую, серую), а также вы можете купить Cтеклотекстолитовую трубку ТСЭФ ГОСТ 12496-88 в Москве, Санкт-Петербурге, Нижнем-Новгороде, Самаре, Е Весь спектр диэлектриков » 16 Июл 2013
 Amazing film! TSP absolutely killed it in 2010 and now I would like to go ski. I first saw this in 8th grade around Halloween, i thought it was form of scary, while using aunts poisoning innocent dead WarafuthLah » 17 Июн 2013
 Але , вы хоть когда пиздите коды , смотрите , что пиздите ?
Найдёте такую стоку в вашем коде - приз !!!!
В коде замените "адрес_Вашего_сайта"
А если я ещё и файлы в папк Чук и Гек » 04 Июн 2013
 у кого есть хороший юрист знакомый или просто скиньте контакты по семейным делам? дайте контакт адекватного адвоката » 08 Май 2013
 jwTlq http://collectionsacguess.weebly.com - sac à main guess OppKyj MypBam http://boutiqueisabelmarant.weebly.com - boutique isabel marant DvnZgy DqoVin http://isabelmarantprix.weebly.com - isabel ma sale Intended for Dummies » 12 Апр 2013
 Нужна была помощь специалиста и я искал юридический центр! После чего с трудом обнаружил на http://www.consalt-centr.ru - юридический центр в Московской области
. просмотрел их веб сайт и оформ Netdruriruilm » 09 Мар 2013
 Подбор текстов неплохой, помещу сайт в закладки. Zubair » 28 Фев 2013
 Excellent:
Many are needed to plant and water what has been planted now that the faith has spread so far and there are so many people... No matter who plants or waters, God gives no harvest unl Johnot » 23 Фев 2013
 Наткнулся на ссылку: http://srub-dizain.ru/articles/94-profilirovanniybrus - купить профилированный брус от производителя
и я стал задумываться о постройке нового дома! Мне как раз хотелось куп QuogsAffege » 16 Фев 2013
 
 
 
 
 
 
 
 
 
 
 
   Главная • Галерея сайта
 
Designed by Gorus © - 2024
Rambler's Top100 Рейтинг@Mail.ru MyCounter - счётчик и статистика (посетителей и хитов сегодня) HotLog WOlist.ru - каталог качественных сайтов Рунета