restaurant1894/css/gallery.css
2020-05-12 16:30:08 +02:00

91 lines
1.7 KiB
CSS
Executable File

html {
height: 100%;
overflow-y: scroll;
}
body#page_gallery {
background-image: url('../img/backgrounds/bg_restaurant.jpg');
background-position: 50%;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
#scroll {
overflow: hidden;
position: absolute;
right: 48px;
border-radius: 50px;
z-index: 1000;
transform-style: preserve-3d;
}
#navi {
list-style: none;
padding: 0;
transition: transform .3s ease-in-out;
}
#navi li {
padding: 10px;
background: linear-gradient(45deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0.5));
border-radius: 50%;
width: 110px;
height: 110px;
margin: 10px 0;
transition: all .5s linear;
overflow: hidden;
}
#navi li:hover {
cursor: pointer;
background: linear-gradient(45deg, rgba(0, 0, 0, .5), rgba(0, 10, 190, 0.5));
}
#navi li a {
display: block;
background-position: center;
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform .35s linear;
}
#navi li:hover:nth-child(2n+1) a {
transform: scale(1.05) rotate(2deg);
}
#navi li:hover:nth-child(2n) a {
transform: scale(1.05) rotate(-2deg);
}
#prev {
width: 69px;
height: 37px;
background: url(../gfx/btn_gallery.png) no-repeat left top;
position: absolute;
top: 55px;
right: 77px;
z-index: 1001;
}
#prev:hover {
background-position: -69px top;
cursor: pointer;
}
#next {
width: 69px;
height: 37px;
background: url(../gfx/btn_gallery.png) no-repeat left -37px;
position: absolute;
bottom: 55px;
right: 77px;
z-index: 1001;
}
#next:hover {
background-position: -69px -37px;
cursor: pointer;
}