
В своё время я писала как сделать красивое всплывающее описание у картинок. Что - то подобное было и в этом посте. Принцип создания таких эффектов практически везде одинаковый. Поиграться со стилями CSS можно сделать и такой вариант, который сегодня предлагаю. При наведении на изображение, текст будет выезжать слева.
Чтобы увидеть результат того, как это работает, скопируйте код, предложенный ниже и вставьте его в форму проверки на этой странице. При желании там же можно сделать свои настройки. Потом разберём некоторые из них.
<figure>
<img src="https://3.bp.blogspot.com/-5fWXP5bjoDQ/WNOL0SWMitI/AAAAAAAAGlU/mHR8j8tbAusFFOc1lB5U5xbKVbOHi7OKgCLcB/s200/%25D1%2581%25D0%25BB%25D0%25B0%25D0%25B9%25D0%25B4%25D0%25B5%25D1%2580.jpg " alt="шпаргалки" />
<figcaption>
<h2>Красивый слайдер CSS</h2>
<p>Красивый слайдер на CSS c всплывающим описанием. Очень просто устанавливается в гаджете HTML/JavaScript или непосредственно в сообщении блога в режиме HTML. Вам только понадобиться установить в коде свои отображаемые в слайде картинки и дать им название.</p>
<a href="http://www.shpargalochki.ru/2017/03/krasivyj-slajder-css-dlya-blogger.html">Подробнее</a>
</figcaption>
</figure>
<style>figure {
width: 280px; /* ширина блока*/
height: 185px; /* высота блока*/
margin: 5px;
overflow: hidden;
position: relative;
text-align: left;
-moz-box-shadow:0 5px 5px #000;
box-shadow:0 5px 5px #000;
-webkit-box-shadow:0 5px 5px #000;
cursor: default;
font:normal 12px/14px Helvetica, Arial, sans-serif;
}
figure figcaption,
figure figcaption img{
width: 285px; /* ширина картинки*/
height: 185px; /* высота картинки*/
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background: #EEEEEE; /* фон блока с описанием*/
-moz-transform: translateX(-280px);
-o-transform: translateX(-280px);
-webkit-transform: translateX(-280px);
transform: translateX(-280px);
visibility:hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
figure img {
width: 280px;
height: 185px;
display: block;
position: relative;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
figure h2 {
text-transform: uppercase;
color: #B22222; /* цвет заголовка*/
position: relative;
font-size: 14px; /* размер шрифта заголовка*/
letter-spacing: 1px;
margin: 10px 0 0 10px;
}
figure p {
font-size: 12px; /* размер шрифта описания*/
line-height: 16px;
position: relative;
color: #333; /* цвет шрифта описания*/
margin: 10px 10px;
-webkit-transition: all 0.5 ease-out;
-moz-transition: all 0.5 ease-out;
-ms-transition: all 0.5 ease-out;
-o-transition: all 0.5 ease-out;
transition: all 0.5 ease-out;
}
figure a {
text-decoration: none;
color: #359CC6;
margin: 10px 10px;
}
figure a:hover {
color: #B22222;
border-bottom: 1px dotted #9F1D35; /* размер и цвет рамки*/
}
figure:hover figcaption,
figure:hover figcaption img{
-moz-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
visibility:visible;
}
figure:hover img {
-moz-transform: translateX(280px);
-o-transform: translateX(280px);
-webkit-transform: translateX(280px);
transform: translateX(280px);
}
figure:hover p{
opacity: 3;
} </style>
<img src="https://3.bp.blogspot.com/-5fWXP5bjoDQ/WNOL0SWMitI/AAAAAAAAGlU/mHR8j8tbAusFFOc1lB5U5xbKVbOHi7OKgCLcB/s200/%25D1%2581%25D0%25BB%25D0%25B0%25D0%25B9%25D0%25B4%25D0%25B5%25D1%2580.jpg " alt="шпаргалки" />
<figcaption>
<h2>Красивый слайдер CSS</h2>
<p>Красивый слайдер на CSS c всплывающим описанием. Очень просто устанавливается в гаджете HTML/JavaScript или непосредственно в сообщении блога в режиме HTML. Вам только понадобиться установить в коде свои отображаемые в слайде картинки и дать им название.</p>
<a href="http://www.shpargalochki.ru/2017/03/krasivyj-slajder-css-dlya-blogger.html">Подробнее</a>
</figcaption>
</figure>
<style>figure {
width: 280px; /* ширина блока*/
height: 185px; /* высота блока*/
margin: 5px;
overflow: hidden;
position: relative;
text-align: left;
-moz-box-shadow:0 5px 5px #000;
box-shadow:0 5px 5px #000;
-webkit-box-shadow:0 5px 5px #000;
cursor: default;
font:normal 12px/14px Helvetica, Arial, sans-serif;
}
figure figcaption,
figure figcaption img{
width: 285px; /* ширина картинки*/
height: 185px; /* высота картинки*/
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background: #EEEEEE; /* фон блока с описанием*/
-moz-transform: translateX(-280px);
-o-transform: translateX(-280px);
-webkit-transform: translateX(-280px);
transform: translateX(-280px);
visibility:hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
figure img {
width: 280px;
height: 185px;
display: block;
position: relative;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
figure h2 {
text-transform: uppercase;
color: #B22222; /* цвет заголовка*/
position: relative;
font-size: 14px; /* размер шрифта заголовка*/
letter-spacing: 1px;
margin: 10px 0 0 10px;
}
figure p {
font-size: 12px; /* размер шрифта описания*/
line-height: 16px;
position: relative;
color: #333; /* цвет шрифта описания*/
margin: 10px 10px;
-webkit-transition: all 0.5 ease-out;
-moz-transition: all 0.5 ease-out;
-ms-transition: all 0.5 ease-out;
-o-transition: all 0.5 ease-out;
transition: all 0.5 ease-out;
}
figure a {
text-decoration: none;
color: #359CC6;
margin: 10px 10px;
}
figure a:hover {
color: #B22222;
border-bottom: 1px dotted #9F1D35; /* размер и цвет рамки*/
}
figure:hover figcaption,
figure:hover figcaption img{
-moz-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
visibility:visible;
}
figure:hover img {
-moz-transform: translateX(280px);
-o-transform: translateX(280px);
-webkit-transform: translateX(280px);
transform: translateX(280px);
}
figure:hover p{
opacity: 3;
} </style>
В коде HTML в строке зелёного цвета поменяйте адрес картинки на свой. Соответственно название, описание и URL адрес страницы куда перейдёт пользователь по ссылке далее.
Основные настройки в стилях CSS отмечены непосредственно в коде. Размер картинки и блока с описанием width: 280px; height: 185px; Готовый код можно установить прямо в сообщении блога в режиме HTML или в гаджет HTML/JavaScript в сайдбаре или в подвале . Если у вас несколько блогов, так можно сделать рекламу основного блога на других.
Настроек совсем немного, не думаю, что могут возникнуть трудности. В любом случае все вопросы задавайте в комментариях.
Спасибо за Ваш визит. Увидимся.
Здесь вы можете оформить подписку на новые шпаргалки
Вика, очень красивое оформление, мне так нравятся такого рода затеи, я бы с удовольствием загрузила свой блог такими изображениями, но у меня небольшая скорость. Что Вы посоветуете?
ОтветитьУдалитьАлла, при частом использовании такого кода или ко всем изображениям второй код CSS который заключён в теги style лучше установить в шаблоне перед строкой /b:skin И потом уже при написание сообщения в режиме HTML вставлять первый код, заключённый в теги figure. Нагрузка на блог будет минимальная. Так как мы единожды пропишем код в шаблоне а не будем добавлять его к каждой картинке.
УдалитьВиктория, при изменении высоты и ширины блок описания меняет свои размеры, а картинка нет. Почему? Спасибо!
ОтветитьУдалитьЛариса, В коде нужно для картинки в двух местах значения менять
Удалитьfigure figcaption img{
width: 280px;
height: 185px;
и
figure img {
width: 280px;
height: 185px;
Ну и соответственно все -moz-transform: translateX(280px);
Дайте свой код CSS то что заключено в теги style
Спасибо, Виктория! Я не поменяла значения здесь: -moz-transform: translateX. И вроде просматривала весь код. Всё получилось:))
ОтветитьУдалитьДа во всех кодах нужно быть внимательными, как вы уже понимаете важна каждая мелочь.
Удалить