Nota: Después de publicar, quizás necesite actualizar la caché de su navegador para ver los cambios.
- Firefox/Safari: Mantenga presionada la tecla Shift mientras pulsa el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
- Google Chrome: presione Ctrl+Shift+R (⌘+Shift+R en Mac)
- Internet Explorer/Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5
- Opera: Presiona Ctrl+F5.
/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */
/* ========================= Barra de Navegación INICIO ========================= */
body {
background: url(https://www.bing.com/images/search?view=detailV2&ccid=45%2fyVZPJ&id=4F5B3AC8C9D766AA233154C9EF397BD5FD1BC394&thid=OIP.45_yVZPJmrIGecUI8g8giQHaEL&mediaurl=http%3a%2f%2fwww.htxt.co.za%2fwp-content%2fuploads%2f2014%2f10%2fWaze.jpg&exph=355&expw=630&q=waze+forum&simid=608052607321835920&selectedIndex=3&qft=+filterui%3alicense-L2_L3_L5_L6) center/cover no-repeat;
display: relative;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
.drogon {
position: absolute;
top: 0;
right: 0;
}
.house-lists {
display: flex;
}
.house {
position: relative;
overflow: hidden;
width: 50px;
height: 150px;
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: 0px;
transition: .5s ease;
margin: 20px;
}
.sigil {
min-width: 10px;
text-align: center;
position: absolute;
bottom: 0px;
}
.sigil img {
/*filter: brightness(0) invert(1);*/
max-width: 40px;
max-height: 40px;
}
.house:hover {
min-width: 200px;
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);
text-shadow:0 2px 7px black;
font-size: 12px;
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%
}
/* ========================= Barra de Navegación FIN ========================= */