Multiple Modal Box - Pure CSS - html

Question

I watched the tutorial Pure CSS Animated Modal/Lightbox. I was able to get the right result even when I changed the modal's corresponding link to an image. The problem is, whenever I add another image and link it to a different modal, the bottom part of both modal shows up when I open the page. Something like this. (Image 1) This also happens when I click on the images. (Image 2) Image Link
I placed all image modal links inside a pure css tab. And here're the codes I used.
EDIT (Full CSS I'm using on my page)
body {
background-image: url('https://lh4.googleusercontent.com/-MohfCSihE2I/VGRnxqZNuFI/AAAAAAAAADE/SgiIb4GEIY8/s2048/back.gif');
background-color: white;
color: black;
font-size: 16px;
font-family: trebuchet ms, helvetica, sans-serif;
letter-spacing: 3px;
}
#font-face {
font-family: bf-font;
src: url(http://bf.amebagames.com/font/bf-font.woff") format('woff');
}
.bf {
font-family: bf-font;
}
.cardbg {
background-image: url('https://lh3.googleusercontent.com/-kV3vTS7WzFQ/Vq8iIGo8mOI/AAAAAAAADS4/qv3O9n1L0gI/s2048-Ic42/cmnTitleRed.png');
text-align: center;
color: #FFF;
border-radius: 3px;
}
.cardattri {
font-family: bf-font;
font-size: 26px;
text-align: center;
}
.cardtitle {
font-size: 20px;
color: #FFF;
text-align: center;
}
.story {
background-image: url('https://lh3.googleusercontent.com/-AVgAM5nK6ec/Vq8iIDN1uyI/AAAAAAAADSw/dThSw3Re6-E/s2048-Ic42/bg%252520brown.png');
width: 200px;
height: 26px;
margin: 0px 75px;
border-radius: 5px;
}
/* TABS */
.tabs {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.tabs:after {
content: "";
clear: both;
display: block;
height: 542px;
}
.tabs li {
float: left;
}
.tabs li > input {
display: none;
}
.tabs li > label {
display: inline-block;
border: 1px solid #000;
border-right-width: 0;
border-bottom-width: 0;
height: 30px;
line-height: 30px;
padding: 5px 20px;
cursor: pointer;
}
.tabs li:last-child > label {
border-right-width: 1px;
}
.tabs .tab-content {
display: none;
position: absolute;
left: 0;
padding: 20px;
border: 1px solid #000;
width: 768px;
height: 500px;
overflow-y: scroll;
}
/* TABS Functional */
.tabs li > input:checked + label {
background-color: #DDD;
}
.tabs li > input:checked ~ .tab-content {
display: block;
}
/* MODAL */
.modal-container {
position: fixed;
background-color: #FFF;
background-image: url('https://lh3.googleusercontent.com/-J73bzJ9PVJE/Vq8iIGmBxlI/AAAAAAAADS0/-uNM7fG2sI4/s2048-Ic42/bg_new%252520no%252520border%2525202.png');
width: 100%;
max-width: 350px;
height: 100%;
max-height: 550px;
left: 50%;
padding: 5px;
border: 2px solid #512d2d;
border-radius: 5px;
-webkit-transform: translate(-50%, 200%);
-ms-transform: translate(-50%, 200%);
transform: translate(-50%, 200%);
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.modal:before {
content: "";
position: fixed;
display: none;
background-color: rgba(0,0,0,.8);
top: 0;
left: 0;
height: 100%;
width: 100%
}
.modal:target:before {
display: block;
}
.modal:target .modal-container {
top: 18%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
a.boxclose {
float: right;
margin-right: -18px;
margin-top: -16px;
width: 22px;
height: 22px;
text-align: center;
text-decoration: uppercase;
color: #947a4e;
font-size: 20px;
border-radius: 12px;
background-color: #FFF;
box-shadow: 0px 0px 2px
rgba(0,0,0,0.4);
}
a.boxclose:link {
text-decoration: none;
}
.boxclose::before {
content: "";
}
#modal-close {}
/* CARD ANIMATION */
.panel {
width: 350px;
height: 438px;
margin: auto;
position: relative;
-moz-border-radius: 0px 50px 0px 50px;
-webkit-border-radius: 0px 50px 0px 50px;
-o-border-radius: 0px 50px 0px 50px;
border-radius: 0px 50px 0px 50px;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
overflow: hidden;
}
.card {
width: 350px;
height: 438px;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
background-repeat: no-repeat;
width: 230px;
-moz-border-radius: 0px 50px 0px 50px;
-webkit-border-radius: 0px 50px 0px 50px;
-o-border-radius: 0px 50px 0px 50px;
border-radius: 0px 50px 0px 50px;
}
.back {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background-repeat: no-repeat;
width: 230px;
-moz-border-radius: 50px 0px 50px 0px;
-webkit-border-radius: 50px 0px 50px 0px;
-o-border-radius: 50px 0px 50px 0px;
}
.panel:hover {
-moz-border-radius: 50px 0px 50px 0px;
-webkit-border-radius: 50px 0px 50px 0px;
-o-border-radius: 50px 0px 50px 0px;
border-radius: 50px 0px 50px 0px;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
overflow: hidden;
}
.panel:hover .front {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.panel:hover .back {
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
HTML code
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="king" checked>
<label for="king">King</label>
<div class="tab-content">
<img src="https://lh3.googleusercontent.com/-REZUMNTK5vA/VINOSxepDYI/AAAAAAAACA4/2ixTyaJIp4U/s2048-Ic42/1a.jpg" width="250px"><br>
<img src="https://lh3.googleusercontent.com/-e2gN0x-vlr8/VVDGF5XpVzI/AAAAAAAACA4/b1SibabLkpA/s2048-Ic42/11a.jpg" width="250px">
<div class="modal" id="saku">
<div class="modal-container">
<span class="bf">x</span>
<div class="cardbg">
<span class="cardattri">q</span>
<span class="cardtitle">[ﾐﾀﾞﾗな寝相] Saku Kagami (SSR)</span>
</div><br>
<div class="story" style="font-size: 14px; text-align: center;"><img src="https://lh3.googleusercontent.com/-UFyiWZmr1AA/VGRnyG-RtQI/AAAAAAAAADU/LWENjijPlMA/s2048-Ic42/icon_story.png" width="14px" height="16px"> 何を想像した？</div><br>
<div class="panel">
<div class="front card">
<img src="https://lh3.googleusercontent.com/-REZUMNTK5vA/VINOSxepDYI/AAAAAAAACA4/2ixTyaJIp4U/s2048-Ic42/1a.jpg" alt="SSR1 Card" width="350px" height="438px">
</div>
<div class="back card">
<img src="https://lh3.googleusercontent.com/-r3CHpi4DxSw/VfVhhUpmDaI/AAAAAAAACA4/VldO2dZdhno/s2048-Ic42/1c.jpg" alt="SSR 1 CG" width="350x" height="438px">
</div>
</div><br>
</div>
</div>
<div class="modal" id="ssr">
<div class="modal-container">
<span class="bf">x</span>
<div class="cardbg">
<span class="cardattri">q</span>
<span class="cardtitle">[ﾐﾀﾞﾗな寝相] Saku Kagami (SSR)</span>
</div><br>
<div class="story" style="font-size: 14px; text-align: center;"><img src="https://lh3.googleusercontent.com/-UFyiWZmr1AA/VGRnyG-RtQI/AAAAAAAAADU/LWENjijPlMA/s2048-Ic42/icon_story.png" width="14px" height="16px"> 何を想像した？</div><br>
<div class="panel">
<div class="front card">
<img src="https://lh3.googleusercontent.com/-e2gN0x-vlr8/VVDGF5XpVzI/AAAAAAAACA4/b1SibabLkpA/s2048-Ic42/11a.jpg" alt="SSR1 Card" width="350px" height="438px">
</div>
<div class="back card">
<img src="https://lh3.googleusercontent.com/-d_7dx1qF0Pc/VfViJRPBiEI/AAAAAAAACA4/UairgGEi-jc/s2048-Ic42/11c.jpg" alt="SSR 1 CG" width="350x" height="438px">
</div>
</div><br>
</div>
</div>
</div>
</li>
</ul>
How do I fix this?
Note: The modal contains a lot of div because I included a card animation on the content.

Answer 1

If you replace the images inside the anchor tags with just standard text it works fine, as so:
Link One
Link Two
The issue is therefore likely to be in your CSS, where something is conflicting, with the image elements you are putting inside.
You might need to post your full code so people on here can get a bit of a better idea as to what is going on.