【css3スライダー】animationでopacityを操作するタイプのスライダーにリンクを付けたい

Question

お世話になっております。
某モールのスマホ用商品ページにスライダーを挿入したく、iframeにてswiper.jsやslick.js等を使用しましたが読み込みでエラーが起き当方では対処できなかったのでcssのみのスライダーを採用しました。
が、メインのイメージにリンクをつけると、イメージはスライドするのですがリンク自体は変わってくれません。
どうにか解決できないでしょうか？

cssがこちら

.slider{
	width: 100%;
	position: relative;
	padding-top: 44%;
	margin: 0;
	text-align: center;
	/*
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);*/
}
.slider>img, .slider>a{
	position: absolute;
	left: 0; top: 0;
	transition: all 0.5s;
}
.slider a img {
		width: 100%;
	}
.slider input[name='slide_switch'] {
	display: none;
}
.slider label {
	width: 18%;
	margin: 1% 0 0 1.7%;
	border: 3px solid #999;
	float: left;
	cursor: pointer;
	transition: all 0.5s;
	opacity: 0.6;
}
.slider label img{
	display: block;
}
.slider input[name='slide_switch']:checked+label {
	border-color: #666;
	opacity: 1;
}
.slider input[name='slide_switch'] ~ a {
	opacity: 0;
	transform: scale(1.1);
}
.slider input[name='slide_switch']:checked+label+a {
	opacity: 1;
	transform: scale(1);
}
</style>

htmlはこちら

	<input type="radio" name="slide_switch" id="id1"/>
	<label for="id1">
	<img src="img1.jpg" width="100%">
	</label>
	<a href="#" target="_top"><img src="img1.jpg"></a>
	
	<input type="radio" name="slide_switch" id="id2" checked="checked"/>
	<label for="id2">
		<img src="img2.jpg" width="100%"/>
	</label>
	<a href="#" target="_top"><img src="img2.jpg"></a>
	
	<input type="radio" name="slide_switch" id="id3"/>
	<label for="id3">
		<img src="img3.jpg" width="100%"/>
	</label>
	<a href="#" target="_top"><img src="img3.jpg"></a>
	
	<input type="radio" name="slide_switch" id="id4"/>
	<label for="id4">
		<img src="img4.jpg" width="100%"/>
	</label>
	<a href="#" target="_top"><img src="img4.jpg"/></a>
	
	<input type="radio" name="slide_switch" id="id5"/>
	<label for="id5">
		<img src="img5.jpg" width="100%"/>
	</label>
	<a href="#" target="_top"><img src="img5.jpg"/></a>
</div>

コード

どなたかよろしくお願いいたします。。

Answer 1

opacityは不透明度です。0にしてもそこに要素があります。z-indexとかで順序を変えるとかする必要があるのでは？

Comments

[NaokiYoshioka]

z-indexが思いつきませんでした、、解決しました！！！！ありがとうございました！！

Answer 2

.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
z-index: 9;
}
.slider input[name='slide_switch'] ~ a {
opacity: 0;
transform: scale(1.1);
z-index: -1;
}
.slider input[name='slide_switch']:checked+label+a {
opacity: 1;
transform: scale(1);
z-index: 9;
}