rantanplan2000
Mitglied
Moin!
wieso ist trotz z-index mein unput nach dem zoom unter dem image?
wieso ist trotz z-index mein unput nach dem zoom unter dem image?
HTML:
<div class="container">
<div class="zoom">
<input id="zoomin" type="radio" name="bilderzoom">
<label class="zoomin-label" for="zoomin">Zoom +</label>
<input class="zoomout-label" id="zoomout" type="radio" name="bilderzoom">
<label for="zoomout">Zoom -</label>
<div class="ttt">
<img src="//www.apple.com/pr/products/images/MBP13_PFOP_Mavericks_131021_HERO.jpg" alt="">
</div>
</div>
</div>
Code:
#zoomin:checked ~ .ttt img {
transform: scale(1.5);
}
#zoomout:checked ~ .ttt img {
transform: scale(1);
}
.zoom {
border: 3px solid #ccc;
display: block;
width: 300px;
height: 280px;
position: relative;
display: block;
overflow: hidden;
}
.zoomin-label {
position: absolute:
top: 0;
right: 0;
z-index: 999;
}
.zoom img {
-webkit-transition: all 1.5s ease;
transition: all 1.5s ease;
display: block;
width: 100%;
z-index: 1;
}
Zuletzt bearbeitet: