Shiva

<style>

@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);

.pfor {display: none;}
#profile {border: 0px; background: transparent;}
body{background: #333333 url(http://hanksrepublic.com/wp-content/uploads/2017/05/pleasing-crystal-wallpaper-crystals.jpg); overflow: hidden;}
/* © The Supreme @ RPC */

body, a {cursor: url(http://i.picpar.com/1eq.png), progress !important;}
#whole{position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px;}

::-webkit-scrollbar-thumb {box-shadow: inset #000000 0px 0px 4px; border-right: 5px transparent solid; border-top: 5px transparent solid; border-bottom: 5px transparent solid;}
::-webkit-scrollbar {width: 8px; background-color: transparent;}

#frame{
position: fixed; margin: auto;
left: 0px; top: 0px; right: 0px; bottom: 0px;
width: 232px; height: 498px;
background: #000000 url(http://i.picpar.com/2ctb.png); overflow: hidden;
border: 1px solid #000000;
text-align: left;
z-index: 1;
}

.picture{
float: left; margin-left: 10px; margin-top: 10px;
width: 210px; height: 110px;
background: #000000;
border: 1px solid #000000;
}

.picture a{
text-decoration: none;
color: #FFFFFF;
}

.picture img{
position: absolute;
width: 210px; height: 110px;
}

.picture:hover .word{
opacity: 1;
}

.picture .word{
position: absolute;
width: 210px; height: 110px;
line-height: 102px;
font-size: 26px;
font-family: Permanent Marker;
text-align: center;
font-weight: bold;
letter-spacing: 2px;
background: rgba(0, 0, 0, 0.5);
text-shadow: #000000 -3px 3px 0px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
opacity: 0;
}



#info{
position: fixed; margin: auto;
left: 0px; top: 0px; right: 0px; bottom: 0px;
width: 1078px; height: 498px;
overflow: hidden;
text-align: left;
}

.info{
float: left;
margin-top: 10px; margin-left: 10px;
width: 1058px; height: 112px;
}

.info:target .left{margin-left: 0px;}
.info:target .right{margin-left: 656px;}
.info:target .text{opacity: 1;}

.text{
position: absolute; margin-top: 10px; margin-left: 10px;
width: 370px; height: 80px;
padding: 5px; overflow: auto;
background: rgba(300, 300, 300, 0.7);
font-family: tahoma;
font-size: 10px;
text-align: justify;
line-height: 10px;
color: #000000;
text-shadow: #000000 0px 0px 0px;
box-shadow: inset #000000 0px 0px 0px 1px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
opacity: 0;
}

.quote{
text-align: center;
font-weight: bold;
font-variant: small-caps;
}

.quote strong{
color: #990000;
text-transform: uppercase;
}

.left{
position: absolute;
margin-left: 244px;
width: 400px; height: 110px;
border: 1px solid #000000;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
opaciy
}

.right{
position: absolute;
margin-left: 412px;
width: 400px; height: 110px;
border: 1px solid #000000;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}

/* This section changes the colors and background of the sliding boxes */

#one .left, #one .right{background: #000088 url(http://www.subdude-site.com/WebPages_Local/RefInfo/Computer/WebDev/WebPageTiles/tilesIce/tile_texture_chiseledIce_bright_bluish_256x256.jpg); background-size: 100px;}
#two .left, #two .right{background: #880000 url(http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/845/thumbs/tileable-icy-and-watery-blue-textures-3.jpg);}
#three .left, #three .right{background: #004400 url(http://www.subdude-site.com/WebPages_Local/RefInfo/Computer/WebDev/WebPageTiles/tilesIce/tile_texture_glacier_blue_256x256.jpg); background-size: 300px;}
#four .left, #four .right{background: #886600 url(https://previews.123rf.com/images/alliedcomputergraphics/alliedcomputergraphics1203/alliedcomputergraphics120300007/12826585-Ice-Cubes-Seamless-Texture-Tile-Stock-Photo.jpg); background-size: 400px;}



</style>


<div id="whole" oncontextmenu="return false;">
<div id="frame">
<div class="picture"><img src="https://68.media.tumblr.com/df5979d86e6fbf47957012d2cb4d3cb4/tumblr_oe0twsSPGh1sd29ego2_500.gif" alt="" /><a class="word" href="#one" target="_self">first</a></div>
<div class="picture"><img src="https://m.popkey.co/0e9580/4je46.gif" alt="" /><a class="word" href="#two" target="_self">second</a></div>
<div class="picture"><img src="https://68.media.tumblr.com/d3eb17b4ed46579513ef4cc0177afb16/tumblr_om43lcI1vQ1vumrzlo2_500.gif" alt="" /><a class="word" href="#three" target="_self">third</a></div>
<div class="picture"><img src="https://vignette3.wikia.nocookie.net/finalfantasy/images/a/aa/FFXV_Shiva_and_Ifrit.png/revision/latest?cb=20161225223506" alt="" /><a class="word" href="#four" target="_self">fourth</a></div>
</div>


<div id="info">
<div class="info" id="one">
<div class="left">
<div class="text">This is the text in the left box of the first tab.</div>
</div>

<div class="right">
<div class="text">This is the text in the right box of the first tab.</div>
</div>
</div>


<div class="info" id="two">
<div class="left">
<div class="text">This is the text in the left box of the second tab.</div>
</div>

<div class="right">
<div class="text">This is the text in the right box of the second tab.</div>
</div>
</div>


<div class="info" id="three">
<div class="left">
<div class="text">This is the text in the left box of the third tab.</div>
</div>

<div class="right">
<div class="text">This is the text in the right box of the third tab.</div>
</div>
</div>


<div class="info" id="four">
<div class="left">
<div class="text">This is the text in the left box of the fourth tab.</div>
</div>

<div class="right">
<div class="text">This is the text in the right box of the fourth tab.</div>
</div>
</div>

</div>


</div>
</div>