Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
figure.image {
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
max-height: 220px;
width: 100%;
background: #000000;
color: #eeeeee;
text-align: center;
}
figure.image* {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
figure.image img {
max-width: 100%;
position: relative;
opacity: 0.6;
}
figure.image h3 {
position: absolute;
left: 50px;
right: 50px;
display: inline-block;
background: #000;
-webkit-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
-moz-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);