mirror of
https://github.com/ceratic/MediaCollectorLibary.git
synced 2026-05-13 23:56:46 +02:00
118 lines
3.1 KiB
CSS
118 lines
3.1 KiB
CSS
.items,
|
|
.item {
|
|
flex-flow: row wrap;
|
|
}
|
|
.items .item,
|
|
.item .item {
|
|
margin: 20px;
|
|
width: 120px;
|
|
height: 180px;
|
|
overflow: hidden;
|
|
box-shadow: 0 5px 10px rgba(0,0,0,0.8);
|
|
transform-origin: center top;
|
|
transform-style: preserve-3d;
|
|
transform: translateZ(0);
|
|
transition: 0.3s;
|
|
}
|
|
.items .item img,
|
|
.item .item img {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
}
|
|
.items .item figcaption,
|
|
.item .item figcaption {
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 20px;
|
|
padding-bottom: 10px;
|
|
font-size: 20px;
|
|
background: none;
|
|
color: #fff;
|
|
transform: translateY(100%);
|
|
transition: 0.3s;
|
|
}
|
|
.items .item:after,
|
|
.item .item:after {
|
|
content: '';
|
|
z-index: 10;
|
|
width: 200%;
|
|
height: 100%;
|
|
top: -90%;
|
|
left: -20px;
|
|
opacity: 0.1;
|
|
transform: rotate(45deg);
|
|
background: linear-gradient(to top, transparent, #fff 15%, rgba(255,255,255,0.5));
|
|
transition: 0.3s;
|
|
}
|
|
.items .item:hover,
|
|
.item .item:hover,
|
|
.items .item:focus,
|
|
.item .item:focus,
|
|
.items .item:active,
|
|
.item .item:active {
|
|
box-shadow: 0 8px 16px 3px rgba(0,0,0,0.6);
|
|
transform: translateY(-3px) scale(1.05) rotateX(15deg);
|
|
}
|
|
.items .item:hover figcaption,
|
|
.item .item:hover figcaption,
|
|
.items .item:focus figcaption,
|
|
.item .item:focus figcaption,
|
|
.items .item:active figcaption,
|
|
.item .item:active figcaption {
|
|
transform: none;
|
|
}
|
|
.items .item:hover:after,
|
|
.item .item:hover:after,
|
|
.items .item:focus:after,
|
|
.item .item:focus:after,
|
|
.items .item:active:after,
|
|
.item .item:active:after {
|
|
transform: rotate(25deg);
|
|
top: -40%;
|
|
opacity: 0.15;
|
|
}
|
|
.item .article {
|
|
overflow: hidden;
|
|
width: 350px;
|
|
height: 235px;
|
|
margin: 20px;
|
|
}
|
|
.item .article img {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
transition: 0.2s;
|
|
}
|
|
.item .article figcaption {
|
|
font-size: 14px;
|
|
text-shadow: 0 1px 0 rgba(51,51,51,0.3);
|
|
color: #fff;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
padding: 40px;
|
|
box-shadow: 0 0 2px rgba(0,0,0,0.2);
|
|
background: rgba(6,18,53,0.6);
|
|
opacity: 0;
|
|
transform: scale(1.15);
|
|
transition: 0.2s;
|
|
}
|
|
.item .article figcaption h3 {
|
|
color: #3792e3;
|
|
font-size: 16px;
|
|
margin-bottom: 0;
|
|
font-weight: bold;
|
|
}
|
|
.item .article:hover img,
|
|
.item .article:focus img,
|
|
.item .article:active img {
|
|
filter: blur(3px);
|
|
transform: scale(0.97);
|
|
}
|
|
.item .article:hover figcaption,
|
|
.item .article:focus figcaption,
|
|
.item .article:active figcaption {
|
|
opacity: 1;
|
|
transform: none;
|
|
} |