Красивое всплывающее описание для картинок

Доброго времени суток, друзья, читатели и гости блога. Предлагаю вам красивый эффект всплывающего описания картинки с активной ссылкой. Очень симпатично это смотрится в сообщении. Этот эффект можно применять и к рекламным баннерам.
Допустим, дать краткое описание партнёрки, которое появится при наведении курсора на изображение (баннер).


Для тех кто публикует фотографии в блоге обозначить дату съёмки и пояснительный текст. Вариантов много. Нагрузки особой на блог этот вариант нести не будет, так как всё это устанавливается без Javascript. Давайте смотреть о чём идёт речь.

Вращающаяся картинка Как Как сделать бесконечно вращающуюся картинку










Сейчас, как всё это реализовать. Нам понадобится этот код.

<style>#image-hover {
}
#okno {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}

#okno:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}

#okno .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

#okno:hover .caption {
margin-bottom:0px;
}

#image-hover .caption {
width:100%;
height:95px;
padding:10px;
background:#F38D12 ;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}

#image-hover .caption b {
text-shadow: 0px 2px 0px #000;
}
#image-hover .caption {
color: #ddd;
line-height: 16px;
font-size: 16px;
}</style>


<div id="image-hover">
<div id='okno'>
<img src="URL вашей картинки"/>
<span class='caption'>
<b>Название </b>
Описание
</span>
</div>
</div>

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

Если есть необходимость сделать активную ссылку в описании нужно в редакторе сообщения выделите это слово и нажмите, как обычно на значок ссылка. При частом использовании эффекта всплывающего описания картинки будет лучше, если первую часть кода, заключённую в теги <style>тут код</style>, но уже без них установить в шаблоне блога перед строкой ]]></b:skin>. Подробнее об этом читайте здесь.

Думаю, что трудностей в использовании такого эффекта у вас не возникнет. А если появятся вопросы, задавайте. Разберёмся. И сегодня у меня всё. Удачи всем. До встречи.

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

Введите Ваш email


7 комментариев:

  1. Доброго времени суток Вика, а можно такой эффект всплывающего описания был как здесь muiv.dist-kurs.ru в разделе "Наши услуги". Пыталась по этому коду подтянуть до верха, то текст отстает, то фильтр не подтягивается. Буду признательна вашему совету. С уважением Тата.

    ОтветитьУдалить
  2. Таких эффектов много. Пробуйте другие
    Эффект появления описания
    http://www.shpargalochki.ru/2016/02/Jeffekt-pojavljajushhegosja-opisanija-u-kartinki.html
    выпадающее описание
    http://www.shpargalochki.ru/2015/03/vsplyvajushhee-opisanie-u-kartinki.html
    появляющееся описание
    http://www.shpargalochki.ru/2015/10/pojavljajushheesja-opisanie-u-kartinok.html

    ОтветитьУдалить
    Ответы
    1. Вот более современный http://www.shpargalochki.ru/2018/01/effekt-sdviga-kartinki-s-poyavlyayushemsya-opisaniem-CSS.html

      Удалить
  3. Смысл в том чтобы нажать на картинку был какой-то текст призывающий это сделать. Эту функцию выполняет (из примера) голубая плашка с надписью, которая потом закрывает всю картинку и выдает еще сообщение.

    ОтветитьУдалить
  4. Поэтому я и пробовала поднять текст и фильтр из вышеуказанного кода. Здесь получается другой код?

    ОтветитьУдалить
    Ответы
    1. Тата, смысл я поняла сразу. С плашкой и фильтрами, уморили меня. Вариантов появления текста при наведении полно. В этом коде совершенно другой эффект. Вот такой попробуйте http://www.shpargalochki.ru/2014/08/blok-reklamy.html. Если вам понравился именно тот как на сайте - ищите в интернете. Хотя есть более красивые варианты

      Удалить
  5. Спасибо Вика, хоть позабавила вас немного. Буду искать.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск