Привет, друзья. Всё больше и больше набирают популярность при веб - дизайне различные hover эффекты для картинок на страницах сайта. Как же я давно не писала про оформление изображений. Если вы что - то пропустили, все эффекты для изображений можно посмотреть под ярлыком картинки. Сегодня предложу красивый, назову его полупрозрачный эффект, когда при наведении курсора на картинку появиться описание и красиво оформленный тон.

Сама фишка ни чем особым не отличается от других подобных эффектов. Всё создаётся так же с помощью CSS и не несёт нагрузки на блог в целом. Сейчас мы сделаем сразу несколько слоёв, но результат будет достаточно интересный. Самое главное использовать будем всего 2 основных цвета. Реализация достаточно простая, но как современно, стильно и красиво это выглядит.
Так же добавим некоторый эффект анимации к картинке.
Чтобы долго не говорить, сразу предлагаю посмотреть результат. Скопируйте код, приведённый ниже и установите его в редакторе для просмотра результата.
<figure class="snip">
<img src="http://veneratour.com/pics/resorts/2011/03/02/8296_1299055722_big.jpg" alt="sample110" />
<figcaption>
<h3>Индонезия</h3>
<p>Красивый остров Бали в океане</p>
</figcaption>
<a href="#"></a>
</figure>
<figure class="snip"><img src="http://tourweek.ru/upload/iblock/858/544133614_3e2445332a_o.jpg" alt="sample59" />
<figcaption>
<h3>Таиланд</h3>
<p>Уникальный остров Пхи - Пхи в Таиланде </p>
</figcaption>
<a href="#"></a>
</figure>
<style>
.snip {
background-color: #fff;
color: #ffffff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
margin: 10px 5px;
max-width: 315px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: right;
width: 100%;
}
.snip *,
.snip *:before,
.snip *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip img {
backface-visibility: hidden;
max-width: 100%;
vertical-align: top;
}
.snip:before,
.snip:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
background-color: #b81212;
opacity: 0.5;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip:before {
-webkit-transform: skew(30deg) translateX(80%);
transform: skew(30deg) translateX(80%);
}
.snip:after {
-webkit-transform: skew(-30deg) translateX(70%);
transform: skew(-30deg) translateX(70%);
}
.snip figcaption {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1;
bottom: 0;
padding: 20px 20px 20px 40%;
}
.snip figcaption:before,
.snip figcaption:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #b81212;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
content: '';
opacity: 0.5;
z-index: -1;
}
.snip figcaption:before {
-webkit-transform: skew(30deg) translateX(100%);
transform: skew(30deg) translateX(100%);
}
.snip figcaption:after {
-webkit-transform: skew(-30deg) translateX(90%);
transform: skew(-30deg) translateX(90%);
}
.snip h2,
.snip p {
margin: 0;
opacity: 0;
letter-spacing: 1px;
}
.snip h2 {
font-family: 'Teko', sans-serif;
font-size: 30px;
font-weight: 700;
line-height: 1em;
text-transform: uppercase;
}
.snip p {
font-size: 0.9em;
}
.snip a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip:hover h2,
.snip.hover h2,
.snip:hover p,
.snip.hover p {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0.9;
}
.snip:hover:before,
.snip.hover:before {
-webkit-transform: skew(30deg) translateX(30%);
transform: skew(30deg) translateX(30%);
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.snip:hover:after,
.snip.hover:after {
-webkit-transform: skew(-30deg) translateX(20%);
transform: skew(-30deg) translateX(20%);
}
.snip:hover figcaption:before,
.snip.hover figcaption:before {
-webkit-transform: skew(30deg) translateX(50%);
transform: skew(30deg) translateX(50%);
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.snip:hover figcaption:after,
.snip.hover figcaption:after {
-webkit-transform: skew(-30deg) translateX(40%);
transform: skew(-30deg) translateX(40%);
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
</style>
<img src="http://veneratour.com/pics/resorts/2011/03/02/8296_1299055722_big.jpg" alt="sample110" />
<figcaption>
<h3>Индонезия</h3>
<p>Красивый остров Бали в океане</p>
</figcaption>
<a href="#"></a>
</figure>
<figure class="snip"><img src="http://tourweek.ru/upload/iblock/858/544133614_3e2445332a_o.jpg" alt="sample59" />
<figcaption>
<h3>Таиланд</h3>
<p>Уникальный остров Пхи - Пхи в Таиланде </p>
</figcaption>
<a href="#"></a>
</figure>
<style>
.snip {
background-color: #fff;
color: #ffffff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
margin: 10px 5px;
max-width: 315px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: right;
width: 100%;
}
.snip *,
.snip *:before,
.snip *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip img {
backface-visibility: hidden;
max-width: 100%;
vertical-align: top;
}
.snip:before,
.snip:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
background-color: #b81212;
opacity: 0.5;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip:before {
-webkit-transform: skew(30deg) translateX(80%);
transform: skew(30deg) translateX(80%);
}
.snip:after {
-webkit-transform: skew(-30deg) translateX(70%);
transform: skew(-30deg) translateX(70%);
}
.snip figcaption {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1;
bottom: 0;
padding: 20px 20px 20px 40%;
}
.snip figcaption:before,
.snip figcaption:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #b81212;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
content: '';
opacity: 0.5;
z-index: -1;
}
.snip figcaption:before {
-webkit-transform: skew(30deg) translateX(100%);
transform: skew(30deg) translateX(100%);
}
.snip figcaption:after {
-webkit-transform: skew(-30deg) translateX(90%);
transform: skew(-30deg) translateX(90%);
}
.snip h2,
.snip p {
margin: 0;
opacity: 0;
letter-spacing: 1px;
}
.snip h2 {
font-family: 'Teko', sans-serif;
font-size: 30px;
font-weight: 700;
line-height: 1em;
text-transform: uppercase;
}
.snip p {
font-size: 0.9em;
}
.snip a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip:hover h2,
.snip.hover h2,
.snip:hover p,
.snip.hover p {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0.9;
}
.snip:hover:before,
.snip.hover:before {
-webkit-transform: skew(30deg) translateX(30%);
transform: skew(30deg) translateX(30%);
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.snip:hover:after,
.snip.hover:after {
-webkit-transform: skew(-30deg) translateX(20%);
transform: skew(-30deg) translateX(20%);
}
.snip:hover figcaption:before,
.snip.hover figcaption:before {
-webkit-transform: skew(30deg) translateX(50%);
transform: skew(30deg) translateX(50%);
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.snip:hover figcaption:after,
.snip.hover figcaption:after {
-webkit-transform: skew(-30deg) translateX(40%);
transform: skew(-30deg) translateX(40%);
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
</style>
В строках, отмеченных зелёным цветом, вставляйте адреса ваших изображений. Розовым цветом я выделила, заголовок на картинке и описание.
Вместо решёток укажите, по необходимости ссылку, куда будет осуществляться переход при клике на картинку, в этом участке кода <a href="#"></a>.
Ну сам цвет такого эффекта в двух местах можно изменить на свой, соответствующий основе вашего дизайна. Воспользуйтесь таблицей цветов.
Сейчас, как всегда, готовый код устанавливается в редакторе сообщений в нужном месте в режиме HTML.
Такой вот необычный и стильный hover эффект для изображений может украсить страницы ваших сообщений.
Всем добра и солнечных денёчков. До встречи.
хотите оформить подписку на новые шпаргалки
Спасибо, Виктория!
ОтветитьУдалитьПожалуйста, Ирина.
УдалитьПопробую. Спасибо, Вика. Интересно, когда за картинкой "прячется" информация 🌠
ОтветитьУдалитьПопробуй, Люба. Код хоть и большой но не тяжёлый. Полупрозрачность тоже задаёт стиль.
УдалитьКРАСИВО смотрится! Спасибо, Вика!
ОтветитьУдалитьАга, самой понравилось.
УдалитьВиктория,здравствуйте! Подскажите,пожалуйста,где лучше размещать картинки для своего блога. Сейчас перерыла столько инфы про фотохостинги и не один не вызвал доверия.Посоветуйте пожалуйста.
ОтветитьУдалитьСерафима Корф, я делаю так. Картинку сохраняю на компьютере. атем загружаю её в блог. Она сохраняется на сервере гугл даже в черновике. Многие создают отдельный блог для хранения картинок. Оттуда потом и адрес её берём. После публикации она тоже сохраняется на сервере Гугл. Если перейдёте в режим HTML то можно видеть адрес картинки с примерно такого вида src="https://2.bp.blogspot.com/-и т. д.
ОтветитьУдалитьпосмотрите адреса ваших опубликованных картинок. После того как написано сообщение и опубликовано, с компьютера я её удаляю, если больше не нужна будет. И всё. Можете прочитать ещё пост http://www.shpargalochki.ru/2015/05/kak-rabotat-s-izobrazhenijami-bloga.html Ещё, как вариант, можно создать Гугл - сайт и там хранить. Здесь лучше вам статью прочитать эту http://www.shpargalochki.ru/2014/08/google-sajt-kak-hranilishhe-fajlov.html А так если не для блога, так и не знаю что. Раньше радикалом пользовалось.
Вика,благодарю Вас за пояснение! Буду разбираться.
УдалитьВика, привет. С праздником! Не подскажешь, вроде всё получается, но... почему в блоге остается светлый желтый фон, а у тебя в редакторе всё корректно. Посмотри, пожалуйста https://000149.blogspot.com/2019/04/blog-post_66.html Что-то делаю не то?
ОтветитьУдалитьЛюба, привет тебя с прошедшим. Тут надо разбираться со значениями position: - та ещё канитель если персонально для каждой страницы. Если будет желание поизучай элемент здесь http://htmlbook.ru/css/position
УдалитьУ меня здесь https://domikdom.blogspot.com/2019/04/blog-post.html посмотри как отобразилось - картинка вообще в шапку ушла.
Люба, когда посмотришь откликнись, чтоб я её с тестового удалила.
Да, Вика. Посмотрела. Спасибо. "Поиграю" ещё, поизучаю.
УдалитьС кодами и прочей атрибутикой всё равно, видимо, уже не разберусь, но всё равно очень красиво!!!
ОтветитьУдалитьАга, Семён красиво получается. для Вас это пока трудновато будет.
УдалитьСпасибо, Вика!Шикарный эффект!
ОтветитьУдалитьЗоя, ту для каждого надо персональные настройки.
УдалитьВика, мой лексикон пополнился на слово ховер-эффект)). Классные штуки ты предлагаешь).
ОтветитьУдалитьВалерия, главное смысл ты поняла и это важно.
УдалитьВиктория, спасибо огромное! Очень полезная статья.
ОтветитьУдалить