mirror of
https://github.com/geode-sdk/geode.git
synced 2024-12-12 00:51:13 -05:00
1 line
3 KiB
CSS
1 line
3 KiB
CSS
.diagonalBackground .figure{position:relative;overflow:hidden;min-width:220px;max-height:220px;text-align:center}.diagonalBackground .figure:hover .diagonal,.diagonalBackground .figure.hover .diagonal{-webkit-transform:skew(-45deg) scaleX(1);transform:skew(-45deg) scaleX(1);-webkit-transition:all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.diagonalBackground .figure:hover .caption .title,.diagonalBackground .figure:hover .caption .desc{-webkit-transform:translate3d(0%, 0%, 0);transform:translate3d(0%, 0%, 0);-webkit-transition-delay:0.2s;transition-delay:0.2s}.diagonalBackground .figure:hover .caption .title{opacity:1}.diagonalBackground .figure:hover .caption .desc{opacity:0.7}.diagonalBackground .figure *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.6s ease;transition:all 0.6s ease}.diagonalBackground .figure img{opacity:1;-webkit-transition:opacity 0.35s;transition:opacity 0.35s;display:block}.diagonalBackground .figure .diagonal{width:100%;height:100%;position:absolute;left:0;bottom:0;opacity:0.90;-webkit-transform:skew(-45deg) scaleX(0);transform:skew(-45deg) scaleX(0);-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;background:#fff}.diagonalBackground .figure .caption{position:absolute;top:50%;left:0;width:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:1}.diagonalBackground .figure .title,.diagonalBackground .figure .desc{margin:0;width:100%;opacity:0;color:inherit}.diagonalBackground .figure .title{padding:0 30px;display:inline-block;font-weight:400;text-transform:uppercase}.diagonalBackground .figure .desc{padding:0 50px;font-size:0.8em;font-weight:500}.diagonalBackground .figure a{left:0;right:0;top:0;bottom:0;position:absolute;z-index:1}.zoomOutRight .figure{position:relative;min-width:230px;min-height:220px;text-align:right;line-height:1.4em;font-size:16px}.zoomOutRight .figure *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.35s ease;transition:all 0.35s ease}.zoomOutRight .figure .image{position:absolute;right:0;top:0;opacity:1;width:100%;height:100%;background:center/cover no-repeat}.zoomOutRight .figure .caption{position:absolute;width:50%;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);padding:20px 0 20px 20px}.zoomOutRight .figure .title,.zoomOutRight .figure .desc{margin:0;width:100%;-webkit-transform:translateX(20px);transform:translateX(20px);opacity:0;color:inherit}.zoomOutRight .figure .title{text-transform:uppercase;margin-bottom:5px}.zoomOutRight .figure .desc{font-size:0.8em}.zoomOutRight .figure a{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1}.zoomOutRight .figure:hover{z-index:2}.zoomOutRight .figure:hover .image{right:-50%;-webkit-transform:scale(0.7);transform:scale(0.7);z-index:1}.zoomOutRight .figure:hover .caption .title,.zoomOutRight .figure:hover .caption .desc{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}
|