anthony
/
PoliticDB
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'd4c5119c0a'
${ noResults }
PoliticDB/Countries/style (copy).css

84 lines
1.6 KiB
CSS
Raw Normal View History Unescape Escape

new file: Countries/de/index.html new file: Countries/fm/index.html new file: Countries/ga/index.html new file: Countries/gd/index.html new file: Countries/ge/index.html new file: Countries/gh/index.html new file: Countries/gm/index.html new file: Countries/gn/index.html new file: Countries/gr/index.html new file: Countries/gt/index.html new file: Countries/gw/index.html new file: Countries/gy/index.html new file: Countries/hn/index.html new file: Countries/ht/index.html new file: Countries/hu/index.html new file: Countries/id/index.html new file: Countries/ie/index.html new file: Countries/il/index.html new file: Countries/in/index.html modified: Countries/index.html new file: Countries/iq/index.html new file: Countries/ir/index.html new file: Countries/is/index.html new file: Countries/it/index.html new file: Countries/jm/index.html new file: Countries/jo/index.html new file: Countries/jp/index.html new file: Countries/ke/index.html new file: Countries/ki/index.html new file: Countries/kr/index.html new file: Countries/kw/index.html new file: Countries/kz/index.html new file: Countries/la/index.html new file: Countries/lb/index.html new file: Countries/li/index.html new file: Countries/lr/index.html new file: Countries/ls/index.html new file: Countries/lt/index.html new file: Countries/lv/index.html new file: Countries/ly/index.html new file: Countries/mc/index.html new file: Countries/md/index.html new file: Countries/mg/index.html new file: Countries/mh/index.html new file: Countries/mk/index.html new file: Countries/ml/index.html new file: Countries/mn/index.html new file: Countries/mr/index.html new file: Countries/mt/index.html new file: Countries/mu/index.html new file: Countries/mv/index.html new file: Countries/mw/index.html new file: Countries/mx/index.html new file: Countries/my/index.html new file: Countries/mz/index.html new file: Countries/ng/index.html new file: Countries/no/index.html new file: Countries/np/index.html new file: Countries/nr/index.html new file: Countries/nz/index.html new file: Countries/om/index.html new file: Countries/pe/index.html new file: Countries/pg/index.html new file: Countries/ph/index.html new file: Countries/pk/index.html new file: Countries/pl/index.html new file: Countries/pt/index.html new file: Countries/pw/index.html new file: Countries/py/index.html new file: Countries/qa/index.html new file: Countries/ro/index.html new file: Countries/ru/index.html new file: Countries/rw/index.html new file: Countries/sv (copy)/index.html
3 weeks ago
:root {
--card-height: 300px;
--card-width: calc(var(--card-height) / 1.5);
}
* {
box-sizing: border-box;
}
.card {
width: var(--card-width);
height: var(--card-height);
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
padding: 0 36px;
perspective: 2500px;
margin: 0 50px;
}
.cover-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
}
.wrapper {
transition: all 0.5s;
position: absolute;
width: 100%;
z-index: -1;
}
.card:hover .wrapper {
transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}
.wrapper::before,
.wrapper::after {
content: "";
opacity: 0;
width: 100%;
height: 80px;
transition: all 0.5s;
position: absolute;
left: 0;
}
.card:hover .wrapper::before,
.wrapper::after {
opacity: 1;
}
.card:hover .wrapper::after {
height: 120px;
}
.title {
width: 100%;
transition: transform 0.5s;
color: white;
-webkit-text-stroke: 2px black;
}
.card:hover .title {
transform: translate3d(0%, -50px, 100px);
}
.character {
width: 75%;
opacity: 0;
transition: all 0.5s;
position: absolute;
z-index: -1;
}
.card:hover .character {
opacity: 1;
transform: translate3d(0%, -30%, 100px);
}