Insta Stories

<div class="stories">
<input type="radio" name="stories" id="st1" checked/>
<input type="radio" name="stories" id="st2"/>
<input type="radio" name="stories" id="st3"/>
<input type="radio" name="stories" id="st4"/>
<input type="radio" name="stories" id="st5"/>
<input type="radio" name="stories" id="st6"/>
<input type="radio" name="stories" id="st7"/>
<div class="stbtn">
<label for="st1"></label>
<label for="st2"></label>
<label for="st3"></label>
<label for="st4"></label>
<label for="st5"></label>
<label for="st6"></label>
<label for="st7"></label>
</div>
<div class="stdata">
<div class="stuser">
<div class="sticon" style="background-image:url(LINK)"></div>
<a href="">nombreusuario</a>
</div>
<div class="stclose"><em class="sf sf-cross"></em></div>
</div>
<div class="stimgs">
<div class="stimg1" style="background-image:url(LINK);"></div>
<div class="stimg2" style="background-image:url(LINK);background-position:70%;"><span style="bottom:100px;right:30px;font-size:20px;line-height:20px;text-align:left;background:#39848a;">frase</span></div>
<div class="stimg3" style="background-image:url(LINK);background-position:left;"></div>
<div class="stimg4" style="background-image:url(LINK);"><span style="bottom:100px;right:30px;font-size:20px;line-height:20px;text-align:left;background:#f948a9;">frase</span></div>
<div class="stimg5" style="background-image:url(LINK);"></div>
<div class="stimg6" style="background-image:url(LINK);"></div>
<div class="stimg7" style="background-image:url(LINK);"></div>
</div>
</div>
<a href="http://necromancercoding.tumblr.com/" class="ncredit">NC</a>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,600;1,900&display=swap" rel="stylesheet"/><link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"/><style>.stories { --btn:rgba(255,255,255,0.80); --btn-active:rgba(255,255,255,0.50); } .stories { position:relative; width:240px; height:426px; border-radius:10px; margin:20px auto; overflow:hidden; } .stories input, .stories br { display:none; } .stbtn { display:flex; justify-content:center; align-items:center; position:absolute; z-index:1; left:10px; right:10px; top:10px; height:3px; overflow:hidden; } .stbtn label{ border-radius:5px; background:var(--btn); align-self:stretch; flex-grow:1; margin-right:3px; cursor:pointer; } .stbtn label:last-of-type{ margin-right:0; } .stimgs { position:absolute; top:0; left:0; display:flex; justify-content:flex-end; align-items:center; height:426px; transition:1s ease; } .stimgs>div { width:240px; height:426px; position:relative; background-size:cover; background-position:center; } .stimgs>div>span { position:absolute; font-family:raleway; font-weight:900; font-style:italic; color:white; padding:3px; } .stdata { display:flex; justify-content:space-between; align-items:center; position:absolute; top:23px; z-index:1; left:10px; right:10px; } .stuser{ display:flex; justify-content:center; align-items:center; font:10px 'Raleway'; text-transform:lowercase; font-weight:600; } .stuser a{ text-decoration:none; color:#fff; } .stclose { color:white; font-size:13px; } .sticon { width:20px; height:20px; border-radius:100%; margin-right:5px; background-size:100%; } .stories input#st1:checked ~ .stimgs { left:0; } .stories input#st2:checked ~ .stimgs { left:-240px; } .stories input#st3:checked ~ .stimgs { left:calc(-240px * 2); } .stories input#st4:checked ~ .stimgs { left:calc(-240px * 3); } .stories input#st5:checked ~ .stimgs { left:calc(-240px * 4); } .stories input#st6:checked ~ .stimgs { left:calc(-240px * 5); } .stories input#st7:checked ~ .stimgs { left:calc(-240px * 6); } .stories input#st1:checked ~ .stbtn label[for="st1"], .stories input#st2:checked ~ .stbtn label[for="st2"], .stories input#st3:checked ~ .stbtn label[for="st3"], .stories input#st4:checked ~ .stbtn label[for="st4"], .stories input#st5:checked ~ .stbtn label[for="st5"], .stories input#st6:checked ~ .stbtn label[for="st6"], .stories input#st7:checked ~ .stbtn label[for="st7"] { background:var(--btn-active); } .stories:before, .stories:after{ font-family:'SaturnIcons'; position:absolute; bottom:10px; font-size:14px; color:white; z-index:1; } .stories:before{ content:"\e1a8"; right:40px; } .stories:after{ content:"\e184"; right:15px; } .ncredit { width: 400px; text-align: center; margin: 0 auto; display: block; font-size: 10px; text-decoration: none; font: 8px verdana; color:#aaa; } .stories + br + .ncredit { margin-top: -15px; } .ncredit:before { content: "©"; }</style>