Instantly share code, notes, and snippets.

Embed
What would you like to do?
An Image-Carousel, for carouselling images, ya know.
.promo {
display: block;
position: relative;
padding: 20px 0px;
background: linear-gradient(to bottom, #333, #666, #333);
}
.image-carousel {
text-align: center;
position: relative;
display: block;
width: 100%;
}
.image-container {
position: relative;
display: inline-block;
width: 625px;
height: 315px;
box-shadow: 0 0 32px #00000088;
}
.image-container .nav {
top: 50%;
left: 0px;
padding: 50px 20px;
margin-top: -50px;
color: #fff;
position: absolute;
display: inline-block;
background: #000000aa;
opacity: 0;
transition: opacity 0.3s;
cursor: pointer;
box-shadow: 0 0 32px #000000aa;
}
.image-container:hover .nav {
opacity: 1;
}
.image-container .next {
left: auto;
right: 0px;
}
.hidden {
display: none;
}
.image-controls {
display: block;
padding-top: 15px;
}
.image-controls i {
padding: 6px 4px;
color: #888;
transition: text-shadow 0.3s;
}
.image-controls i.selected {
color: #ccc;
text-shadow: 0 0 2px #000, 0 0 8px #fff;
}
.promo .of-course {
position: absolute;
right: 25px;
bottom: 0px;
}
.of-course {
display: inline-block;
color: #444;
font-style: italic;
transition: text-shadow 0.4s, color 0.4s;
}
.of-course a {
color: inherit;
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment