Single post in Guide to CSS (Beginner & Intermediate) [In Progress]
Forum Index > PokéFarm > Guides > Guide to CSS (Beginner & Intermediate) [In Progress] >
I couldn't get the random image thing out of my head... still can't do randomness in CSS, but I randomly wrote some slideshow code that I thought was cool :P
Edit to add instructions
Sorry if this isn't beginner-friendly it's late...
1. Set max height/width to the dimensions of the largest image.
2. Add the images to the [ img ] code section. The first image must have the "cover" [ sc ], all others should be "alt".
3. Add the appropriate number of "&:hover .alt:nth-child(X)" blocks at the bottom (as many as are "alt" images, with X starting at 2)
4. Set the delays. The first # is how many seconds after the start of the slideshow the image will begin to appear, the second # is when it will disappear.
Also code
[sc=p]Hover image for a slideshow![/sc]
[sc=slideshow][sc=wrapper]
[sc=cover][img]/img/pkmn/d/h/p.png[/img][/sc]
[sc=alt][img]/img/pkmn/j/m/8.png[/img][/sc]
[sc=alt][img]/img/pkmn/5/b/6.png[/img][/sc]
[sc=alt][img]/img/pkmn/p/6/g.png[/img][/sc]
[sc=alt][img]/img/pkmn/c/t/k.png[/img][/sc]
[/sc][/sc]
[style]
.slideshow {
/* EDIT HERE */
--max-height: 100px;
--max-width: 100px;
/* DO NOT EDIT */
height: var(--max-height);
width: var(--max-width);
overflow: hidden;
line-height: 0;
.wrapper {
position: relative;
}
.cover {
opacity: 1;
position: absolute;
transition: opacity 2s linear;
}
&:hover .cover {
opacity: 0;
}
.alt {
opacity: 0;
left: 0;
position: absolute;
transition-property: opacity, left;
transition-timing-function: linear, linear;
transition-duration: 0s, 0s;
transition-delay: 0s, 0s;
}
&:hover .alt {
opacity: 1;
left: var(--max-width);
transition-duration: 2s, 0s;
}
&:hover .alt:last-child {
left: 0;
}
/* EDIT HERE */
&:hover .alt:nth-child(2) {
transition-delay: 2s, 6s;
}
&:hover .alt:nth-child(3) {
transition-delay: 6s, 10s;
}
&:hover .alt:nth-child(4) {
transition-delay: 10s, 14s;
}
&:hover .alt:nth-child(5) {
transition-delay: 14s, 18s;
}
}
[/style]
Hover image for a slideshow!
