Scribd
Upload
9 views2 pages

@import Url (Codepen - Iochrisdothtmlp

The document contains CSS styles for a tile layout with animations. It defines variables for animation speed and styles for tiles, including hover effects that reveal details and images. The layout is centered on the page and uses gradients and transitions for visual effects.

Uploaded by

namandua499
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views2 pages

@import Url (Codepen - Iochrisdothtmlp

The document contains CSS styles for a tile layout with animations. It defines variables for animation speed and styles for tiles, including hover effects that reveal details and images. The layout is centered on the page and uses gradients and transitions for visual effects.

Uploaded by

namandua499
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

@import url(//codepen.io/chrisdothtml/pen/ojLzJK.

css);

// variables
$anim-speed: 0.3s;

// main styles
.tiles {
width: 1040px;
font-size: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

.tile {
display: inline-block;
margin: 10px;
text-align: left;
opacity: .99;
overflow: hidden;
position: relative;
border-radius: 3px;
box-shadow: 0 0 20px 0 rgba(0,0,0,.05);

&:before {
content: '';
background: linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.7) 100%
);
width: 100%;
height: 50%;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 2;
transition-property: top, opacity;
transition-duration: $anim-speed;
}

img {
display: block;
max-width: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.details {
font-size: 16px;
padding: 20px;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
span {
display: block;
opacity: 0;
position: relative;
top: 100px;
transition-property: top, opacity;
transition-duration: $anim-speed;
transition-delay: 0s;
}

.title {
line-height: 1;
font-weight: 600;
font-size: 18px;
}

.info {
line-height: 1.2;
margin-top: 5px;
font-size: 12px;
}
}

&:focus,
&:hover {

&:before,
span {
opacity: 1;
}

&:before {
top: 50%;
}

span {
top: 0;
}

.title {
transition-delay: 0.15s;
}

.info {
transition-delay: 0.25s;
}
}
}
}

You might also like