<center><div class="axic"><div class="axicbg"><div class="axi"><input type="checkbox" class="axit" id="plus"><label for="plus">+</label></input><div class="axiw"><div class="axii">

 

<div class="axile">JégVirág Design<span style="color: #4ecdc4;">+</span></div><div class="axicon">

 

<div class="axil"><span style="color: #4ecdc4;">f</span>riends</div>

 

info here.<br><br>

 

<div class="axil"><span style="color: #4ecdc4;">e</span>nemies</div>

 

info here.<br><br>

 

<div class="axil"><span style="color: #4ecdc4;">l</span>overs</div>

 

info here.<br><br>

 

<div class="axil"><span style="color: #4ecdc4;">o</span>ther</div>

 

info here.

 

</div></div></div></div></div><div class="axicred">© fable.</div></center>

 

<style>

 

input.axit { display: none }

 

input.axit ~ div { overflow: hidden; transition-duration: 1s; opacity: 0; }

 

input.axit:checked ~ div { opacity: 1; left: 0px; transition-duration: 1.5s; }

 

input.axit:checked + label { top: 180px; left: -150px; transition-duration: 1.5s; }

 

.axi { margin: auto; transition-duration: 1,5s; }

 

.axi label { top: 100px; width: 30px; height: 35px; padding: 15px 10px 0 10px; background: #4ecdc4; color: #ffffff; display: block; font-family: arial; font-size: 55px; font-weight: bold; position: relative; left: 0px; transition-duration: 1.5s; box-shadow: 1px 1px 5px #757575; }

 

.axiw { position: relative; top: -40px; left: 200px; margin-left: 80px; width: 300px; height: 230px; padding: 10px; transition-duration: 1.5s; }

 

.axii { width: 270px; height: 200px; padding: 7px 5px 5px 5px; background: #fefefe; box-shadow: 1px 1px 5px #757575; transition-duration: 1.5s; }

 

.axic { width: 400px; height: 250px; padding: 20px; background: #fefefe; box-shadow: 1px 1px 5px #757575; }

 

.axicbg { width: 400px; height: 250px; background: url(//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1474626385_11.jpg); overflow: hidden; }

 

.axile { font-family: arial; font-size: 24px; font-weight: bold; color: #505050; letter-spacing: -2px; }

 

.axil { font-family: arial; font-size: 14px; font-weight: bold; color: #505050; letter-spacing: -1px; font-style: italic; text-align: right; }

 

.axicon { margin-top: 7px; width: 240px; height: 160px; font-family: arial; font-size: 10px; color: #505050; overflow: auto; text-align: justify; line-height: 120%; padding: 0 5px; }

 

.axicon::-webkit-scrollbar { width:9px; border: 4px solid #fefefe; background-color: #4ecdc4; }

 

.axicon::-webkit-scrollbar-thumb { width:7px; border: 1px solid #fefefe; background-color: #4ecdc4; }

 

.axicred { font-size: 6px; font-family: arial; font-weight: bold; text-transform: uppercase; color: #eaeaea; text-align: right; width: 350px; }

 

</style>