penguin/AstroJS

botanjs/src/Astro/Blog/Components/Entry/Tile.css

raw · 2776 bytes

.tile-block {
	float: left;

	width: 150px;
	height: 150px;
	position: relative;
	overflow: hidden;

	display: inline-block;

	background-image: linear-gradient(
		135deg, transparent 40%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.2) 60%, transparent 60%
	)
	, linear-gradient(
		225deg, transparent 40%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.2) 60%, transparent 60%
	)
	, linear-gradient( 45deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 10%, transparent 10% )
	, linear-gradient( 135deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 10%, transparent 10% )
	, linear-gradient( 225deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 10%, transparent 10% )
	, linear-gradient( 315deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 10%, transparent 10% )
	;
	background-size: 100px 100px;
	background-color: white;

	border: 1px solid #d4d7c9;
}


.tile-block .banner {
	background-repeat: no-repeat;
	background-position: center center;
	opacity: 0.9;
	background-color:white;
}

.tile-block .banner, .tile-block .link {
	width: 100%;
	height: 100%;

	position: absolute;

	top: 0;
	left: 0;
}

.tile-block .link {
	background-color: black;
	color: white;
	opacity: 0;
	text-align: center;
	text-decoration: none;

	padding-top: 55%;

	background-image: linear-gradient(
		135deg, transparent 40%, rgba(255,255,255,.1) 40%, rgba(255,255,255,.1) 60%, transparent 60%
	)
	, linear-gradient(
		225deg, transparent 40%, rgba(255,255,255,.1) 40%, rgba(255,255,255,.1) 60%, transparent 60%
	)
	, linear-gradient( 45deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.1) 10%, transparent 10% )
	, linear-gradient( 135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.1) 10%, transparent 10% )
	, linear-gradient( 225deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.1) 10%, transparent 10% )
	, linear-gradient( 315deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.1) 10%, transparent 10% )
	;

	background-size: 100px 100px;
	background-position: 100% 0;

    -webkit-transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -moz-transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -ms-transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -o-transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */

    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

.tile-block .link:hover {
	padding-top: 50%;
	opacity: 1;
}

.tile-block .title {
	margin-top: -0.5em;
}