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

Копируйте предложенный ниже код в блокнот или черновик и разберём некоторые детали.
<a href=" адрес страницы, на которую ведёт картинка" title="мой блог"><img src=" адрес вашей картинки" alt=""></a>
<style>a {
display: inline-block;
overflow: hidden;
position: relative;
text-align: center;
text-decoration: none;
}
a:before {
background-color: rgb(0, 0, 0);
content: "";
display: block;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 2;
}
a:after {
color: rgba(255, 255, 255, 0);
content: attr(title);
display: block;
font-family: Tahoma;
font-size: 30px;
font-weight: bold;
padding: 0 3%;
position: absolute;
text-transform: uppercase;
top: 50%;
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scaleX(3) translateY(-50%);
-ms-transform: scaleX(3) translateY(-50%);
transform: scaleX(3) translateY(-50%);
width: 94%;
z-index: 3;
}
a img {
border: none;
display: block;
z-index: 1;
}
a:after {
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
a:hover:before {
opacity: 0.6;
}
a:hover:after {
color: rgba(255, 255, 255, 1);
-webkit-transform: scaleX(1) translateY(-50%);
-ms-transform: scaleX(1) translateY(-50%);
transform: scaleX(1) translateY(-50%);
}</style>
<style>a {
display: inline-block;
overflow: hidden;
position: relative;
text-align: center;
text-decoration: none;
}
a:before {
background-color: rgb(0, 0, 0);
content: "";
display: block;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 2;
}
a:after {
color: rgba(255, 255, 255, 0);
content: attr(title);
display: block;
font-family: Tahoma;
font-size: 30px;
font-weight: bold;
padding: 0 3%;
position: absolute;
text-transform: uppercase;
top: 50%;
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scaleX(3) translateY(-50%);
-ms-transform: scaleX(3) translateY(-50%);
transform: scaleX(3) translateY(-50%);
width: 94%;
z-index: 3;
}
a img {
border: none;
display: block;
z-index: 1;
}
a:after {
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
a:hover:before {
opacity: 0.6;
}
a:hover:after {
color: rgba(255, 255, 255, 1);
-webkit-transform: scaleX(1) translateY(-50%);
-ms-transform: scaleX(1) translateY(-50%);
transform: scaleX(1) translateY(-50%);
}</style>
<a href=" адрес страницы, на которую ведёт картинка" title="мой блог"><img src=" адрес вашей картинки" alt=""></a>
Вот такой красивый эффект появляющегося описания на изображении с эффектом затемнения картинки обязательно привлечёт внимание ваших посетителей.
Вам спасибо, что читаете мои шпаргалки. Удачи и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
0 коммент.:
ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML