CSS эффекты при наведении на изображения с текстом
Здесь собраны простые CSS ховер (hover) эффекты для картинок у которых есть описание.
Эффект 1
Скопировано
<figure>
<img src='images/01.png' alt='' />
<figcaption>
<h2>Заголовок</h2>
<span>Краткое описание</span>
<a href='#'>Ссылка</a>
</figcaption>
</figure>
Показать код
Скопировано
/* основные стили */
figure {
display: inline-block;
margin: 0;
position: relative;
}
figure img {
display: block;
}
figcaption {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 20px;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
background: #2c3f52;
}
figure:hover figcaption {
opacity: 1;
-webkit-transform: translate(15px, 15px);
-moz-transform: translate(15px, 15px);
-ms-transform: translate(15px, 15px);
transform: translate(15px, 15px);
}
figcaption h2 {
margin: 0 0 20px;
color: #fff;
}
figcaption span {
color: #ed4e6e;
}
figcaption a {
margin: 30px 0 0;
padding: 5px 10px;
color: #fff;
text-decoration: none;
background: #ed4e6e;
}
/* дополнительные стили */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { height: 100%; font-size: 100%; padding: 0; margin: 0; font-family: 'Arial', sans-serif; }
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
Показать код
Эффект 2
Скопировано
<figure>
<img src='images/01.png' alt='' />
<figcaption>
<h2>Заголовок</h2>
<span>Краткое описание</span>
<a href='#'>Ссылка</a>
</figcaption>
</figure>
Показать код
Скопировано
/* основные стили */
figure {
display: inline-block;
margin: 0;
position: relative;
}
figure img {
position: relative;
z-index: 10;
display: block;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
figure:hover img {
-webkit-transform: translateY(-90px);
-moz-transform: translateY(-90px);
-ms-transform: translateY(-90px);
transform: translateY(-90px);
}
figcaption {
position: absolute;
left: 0;
bottom: 0;
height: 90px;
width: 100%;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
}
figcaption h2 {
margin: 0 0 7px;
color: #fff;
}
figcaption a {
position: absolute;
right: 20px;
top: 30px;
padding: 5px 10px;
color: #fff;
text-decoration: none;
background: #ed4e6e;
}
/* дополнительные стили */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { height: 100%; font-size: 100%; padding: 0; margin: 0; font-family: 'Arial', sans-serif; }
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
Показать код
Эффект 3
Скопировано
<figure>
<img src='images/01.png' alt='' />
<figcaption>
<h2>Заголовок</h2>
<span>Краткое описание</span>
<a href='#'>Ссылка</a>
</figcaption>
</figure>
Показать код
Скопировано
/* основные стили */
figure {
display: inline-block;
overflow: hidden;
margin: 0;
position: relative;
}
figure:hover img {
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
transform: translateY(-50px);
}
img {
display: block;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
figcaption {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
padding: 20px;
color: #ed4e6e;
opacity: 0;
background: #2c3f52;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
figure:hover figcaption {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
figcaption h2 {
margin: 0 0 7px;
color: #fff;
}
figcaption a {
position: absolute;
right: 20px;
bottom: 20px;
padding: 5px 10px;
color: #fff;
text-decoration: none;
background: #ed4e6e;
}
/* дополнительные стили */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { height: 100%; font-size: 100%; padding: 0; margin: 0; font-family: 'Arial', sans-serif; }
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
Показать код
Эффект 4
Скопировано
<div class='figure_wrp'>
<figure>
<div><img src='images/01.png' alt='' /></div>
<figcaption>
<h2>Заголовок</h2>
<span>Краткое описание</span>
<a href='#'>Ссылка</a>
</figcaption>
</figure>
</div>
Показать код
Скопировано
/* основные стили */
.figure_wrp {
display: inline-block;
-webkit-perspective: 1700px;
-moz-perspective: 1700px;
perspective: 1700px;
-webkit-perspective-origin: 0 50%;
-moz-perspective-origin: 0 50%;
perspective-origin: 0 50%;
}
figure {
position: relative;
display: inline-block;
margin: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
figure > div {
overflow: hidden;
}
figure img {
display: block;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
figure:hover img {
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
}
figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
height: 100%;
width: 50%;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
figure:hover figcaption {
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
figcaption h2 {
margin: 0 0 7px;
color: #fff;
}
figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
padding: 5px 10px;
color: #fff;
text-decoration: none;
background: #ed4e6e;
}
/* дополнительные стили */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { height: 100%; font-size: 100%; padding: 0; margin: 0; font-family: 'Arial', sans-serif; }
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
Показать код
Эффект 5
Скопировано
<figure>
<img src='images/01.png' alt='' />
<figcaption>
<h2>Заголовок</h2>
<span>Краткое описание</span>
<a href='#'>Ссылка</a>
</figcaption>
</figure>
Показать код
Скопировано
/* основные стили */
figure {
display: inline-block;
position: relative;
margin: 0;
}
figure img {
display: block;
position: relative;
z-index: 10;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
figure:hover img {
display: block;
position: relative;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
}
figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
height: 100%;
width: 100%;
opacity: 0;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
figure:hover figcaption {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
figcaption h2 {
margin: 0 0 7px;
color: #fff;
}
figure a {
position: absolute;
bottom: 20px;
right: 20px;
padding: 5px 10px;
color: #fff;
text-decoration: none;
background: #ed4e6e;
}
/* дополнительные стили */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { height: 100%; font-size: 100%; padding: 0; margin: 0; font-family: 'Arial', sans-serif; }
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
Показать код
Эффект 6
Скопировано
<figure>
<img src='images/01.png' alt='' />
<figcaption>
<h2>Заголовок</h2>
<span>Краткое описание</span>
<a href='#'>Ссылка</a>
</figcaption>
</figure>
Показать код
Скопировано
/* основные стили */
figure {
display: inline-block;
margin: 0;
position: relative;
}
figure img {
display: block;
position: relative;
z-index: 10;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
figure:hover img {
-webkit-transform: translateY(-50px) scale(0.5);
-moz-transform: translateY(-50px) scale(0.5);
-ms-transform: translateY(-50px) scale(0.5);
transform: translateY(-50px) scale(0.5);
}
figcaption {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
}
figcaption h2 {
margin: 60% 0 7px;
color: #fff;
}
figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
padding: 5px 10px;
color: #fff;
text-decoration: none;
background: #ed4e6e;
}
/* дополнительные стили */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { height: 100%; font-size: 100%; padding: 0; margin: 0; font-family: 'Arial', sans-serif; }
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
Показать код
Эффект 7
Скопировано
<figure>
<img src='images/01.png' alt='' />
<figcaption>
<h2>Заголовок</h2>
<p>Краткое описание краткое описание краткое описание краткое описание.</p>
<a href='#'>Ссылка</a>
</figcaption>
</figure>
Показать код
Скопировано
/* основные стили */
figure {
display: inline-block;
margin: 0;
position: relative;
overflow: hidden;
}
figure img {
display: block;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
figure:hover img {
-webkit-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
figcaption {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
opacity: 0;
background-color: #85ceffb3;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
figure:hover figcaption {
opacity: 1;
}
figure h2 {
color: #fff;
padding: 10px;
margin: 30px 0 0;
background-color: #264b68;
opacity: 0;
-webkit-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
figure p {
padding: 20px;
margin: 10px 0;
text-align: center;
font-style: italic;
opacity: 0;
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
figure a {
display: inline-block;
color: #fff;
text-decoration: none;
padding: 10px 15px;
background-color: #264b68;
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
figure:hover h2,
figure:hover p,
figure:hover a {
opacity: 1;
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
/* дополнительные стили */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { height: 100%; font-size: 100%; padding: 0; margin: 0; font-family: 'Arial', sans-serif; }
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
Показать код