(Página creada con «→Los estilos CSS colocados aquí se aplicarán a todas las apariencias: #NavBar1 { background-color: rgba(146,195,211,1.00); display: block; font-family: Arial;…») |
Sin resumen de edición |
||
Línea 1: | Línea 1: | ||
/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */ | /* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */ | ||
body { | |||
{ | background: url(https://cdnb.artstation.com/p/assets/images/images/012/370/613/large/steve-lund-castle-color2.jpg?1534439770) center/cover no-repeat; | ||
background | display: flex; | ||
align-items: center; | |||
justify-content: center; | |||
height: 100vh; | |||
margin: 0; | |||
} | |||
.drogon { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
} | |||
} | .house-lists { | ||
display: flex; | |||
{ | } | ||
.house { | |||
position: relative; | |||
overflow: hidden; | |||
width: 70px; | |||
height: 550px; | |||
background-size: auto 105%; | |||
background-position: center; | |||
border-radius: 60px; | |||
-webkit-box-shadow: 0px 0px 10px -1px rgba(255,255,255,1); | |||
-moz-box-shadow: 0px 0px 10px -1px rgba(255,255,255,1); | |||
} | box-shadow: 0px 0px 10px -1px rgba(255,255,255,1); | ||
{ | |||
min-width: 100px; | |||
transition: .5s ease; | |||
margin: 15px; | |||
} | } | ||
{ | .sigil { | ||
min-width: 100px; | |||
text-align: center; | |||
position: absolute; | |||
bottom: 10px; | |||
} | |||
.sigil img { | |||
filter: brightness(0) invert(1); | |||
max-width: 80px; | |||
max-height: 60px; | |||
} | |||
} | |||
{ | |||
} | |||
{ | |||
.house:hover { | |||
min-width: 600px; | |||
{ | background-size: auto 100%; | ||
border-radius: 10px; | |||
} | |||
.house-inner { | |||
position: relative; | |||
height: 100%; | |||
display: flex; | |||
align-items: flex-end; | |||
} | } | ||
.house::before { | |||
content: ''; | |||
width: 100%; | |||
height: 100%; | |||
background: rgba(0, 0, 0, 0.5); | |||
position: absolute; | |||
transition: .5s ease; | |||
} | |||
.house:hover::before{ | |||
{ | background: none; | ||
} | |||
.house-name { | |||
color: #fff; | |||
transform: rotate(-90deg); | |||
font-size: 50px; | |||
letter-spacing: 2px; | |||
transition: .5s ease; | |||
max-width: 100%; | |||
margin-bottom: 120%; | |||
} | |||
.house:hover .house-name{ | |||
transform:rotate(0deg); | |||
margin-bottom: 3%; | |||
margin-left:20% | |||
} | |||
{ | |||
} | |||
{ | |||
} | |||
{ | |||
} | |||
{ | |||
} |
Revisión del 22:27 30 may 2020
/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */
body {
background: url(https://cdnb.artstation.com/p/assets/images/images/012/370/613/large/steve-lund-castle-color2.jpg?1534439770) center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.drogon {
position: absolute;
top: 0;
right: 0;
}
.house-lists {
display: flex;
}
.house {
position: relative;
overflow: hidden;
width: 70px;
height: 550px;
background-size: auto 105%;
background-position: center;
border-radius: 60px;
-webkit-box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);
box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);
min-width: 100px;
transition: .5s ease;
margin: 15px;
}
.sigil {
min-width: 100px;
text-align: center;
position: absolute;
bottom: 10px;
}
.sigil img {
filter: brightness(0) invert(1);
max-width: 80px;
max-height: 60px;
}
.house:hover {
min-width: 600px;
background-size: auto 100%;
border-radius: 10px;
}
.house-inner {
position: relative;
height: 100%;
display: flex;
align-items: flex-end;
}
.house::before {
content: '';
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
transition: .5s ease;
}
.house:hover::before{
background: none;
}
.house-name {
color: #fff;
transform: rotate(-90deg);
font-size: 50px;
letter-spacing: 2px;
transition: .5s ease;
max-width: 100%;
margin-bottom: 120%;
}
.house:hover .house-name{
transform:rotate(0deg);
margin-bottom: 3%;
margin-left:20%
}