CSS only slideshow

by cchana

HTML

<div class="slideshow">
	<div id="slide-1" class="slide">
		<a href="#slide-2"><img src="https://c1.staticflickr.com/9/8724/16310801553_cea90ae63d_n.jpg" /></a>
	</div>
	<div id="slide-2" class="slide">
		<a href="#slide-3"><img src="https://c2.staticflickr.com/4/3719/19819674272_2384feaaf8_n.jpg" /></a>
	</div>
	<div id="slide-3" class="slide">
		<a href="#slide-4"><img src="https://c2.staticflickr.com/2/1627/24319275501_3ec6f36fa7_n.jpg" /></a>
	</div>
	<div id="slide-4" class="slide">
		<a href="#slide-5"><img src="https://c2.staticflickr.com/2/1460/25194537936_e3c54faefc_n.jpg" /></a>
	</div>
	<div id="slide-5" class="slide">
		<a href="#slide-6"><img src="https://c2.staticflickr.com/2/1460/26216238325_9c425923a7_n.jpg" /></a>
	</div>
	<div id="slide-6" class="slide">
		<a href="#slide-7"><img src="https://c2.staticflickr.com/8/7578/26194232483_8204bf119b_n.jpg" /></a>
	</div>
	<div id="slide-7" class="slide">
		<a href="#slide-1"><img src="https://c2.staticflickr.com/8/7106/26862741906_d5283c42ba_n.jpg" /></a>
	</div>
</div>
<a href="#slide-1">1</a> - <a href="#slide-2">2</a> - <a href="#slide-3">3</a> - <a href="#slide-4">4</a> - <a href="#slide-5">5</a> - <a href="#slide-6">6</a> - <a href="#slide-7">7</a>

SCSS

.slideshow {
	height: 213px;
	position: relative;
	width: 320px;
	.slide {
		background-color: #FFF;
		box-sizing: border-box;
		display: none;
		height: 100%;
		position: absolute;
		width: 100%;
		&:first-child,
		&:target {
			display: block;
		}
	}
}