Juba

<style>

.pfor {display: none;}
#profile {background-color: transparent; border: 0px;}

body {background: black;
}

#whole {position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: black;
background-image:
url(http://i57.tinypic.com/2rp4l61.jpg);
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;
}

#darken {position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: black;
z-index: -1;
opacity: .3;}

#boxspread {
  position: absolute;
  left: 43%;
  top: 200px;
  height: 386px;
  width: 310px;
  border: 0px solid black;
  border-radius: 20px;
  overflow: hidden;
  -webkit-transition: all 1s;
transition: all 1s;
}

#boxspread:hover {
  left: 20%;
  width: 1100px;}


#lifter{ position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}


#holder1 {position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
-webkit-transition: opacity .5s, padding 1s .2s;
transition: opacity .5s, padding 1s .2s;
}
#holder1:hover {
  opacity: 0;
  padding-left: 1200px;}

#holder2 {position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
padding-left: 0px;
-webkit-transition: padding 1s 1s;
transition: padding 1s 1s;}
#holder2:hover{
  padding-left: 680px;}

#holder3 {position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
-webkit-transition: padding 1s .5s;
transition: padding 1s .5s;}
#holder3:hover {
  padding-left: 340px;}

#holder4 {position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
-webkit-transition: padding 1s;
transition: padding 1s;}
#holder4:hover {
  padding-left: 0px;}


#object1 {
  position: absolute;
  height:375px;
width: 300px;
border: 1px solid black;
background-image:
  url(http://i61.tinypic.com/219c6jm.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
}

#object2 {
  position: absolute;
  height: 375px;
  width: 300px;
  border: 1px solid black;
  background-image:
  url(http://i59.tinypic.com/2zftua9.jpg);
  background-size: 400px 400px;
  background-position: center;
  background-repeat: no-repeat;
}

#object3 {
  position: absolute;
  height: 375px;
  width: 300px;
  border: 1px solid black;
  background-image:
  url(http://i60.tinypic.com/23ua3co.jpg);
  background-size: 140%;
  background-position-x: -20px;
  background-repeat: no-repeat;
}

#object4 {
  position: absolute;
  height: 375px;
  width: 300px;
  border: 1px solid black;
  background-image:
  url(http://i61.tinypic.com/260xvzb.jpg);
  background-size: 100%;
  background-repeat: no-repeat;}

  #object1, #object2, #object3, #object4{
    border-radius: 20px;
    border-box: box-sizing;}

#object2, #object3, #object4 {
  border: 5px solid /* #211829 */ black !important; }

#inboxspread{
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0;
  -webkit-transition: opacity 1s 2s;
transition: opacity 1s 2s;
}
#inboxspread:hover{
  opacity: 1;}


#inbox {
  position: absolute;
  margin-top: 18px;
  margin-left: 25;
  height: 350px;
  width: 260px;
opacity: 0;
border-radius: 20px;
color: white;
background: black;
overflow: hidden;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}

#inbox.b {
  left: 340px;
}

#inbox.c {
  left: 680px;
}

#inbox:hover {opacity: 1;}

#inboxinbox {position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
overflow: auto;
border-radius: 20px;
background: #211829;
opacity :.8;
color: black;
text-align: center;
}


</style>


<div id="whole">
<div id="darken">
</div>

<div id="boxspread">

<div id="holder2">
<div id="object2">
</div>

<div id="holder3">
<div id="object3">
</div>

<div id="holder4">
<div id="object4">
</div>

<div id="inboxspread">
<div id="inbox">
<div id="inboxinbox">
</div>
</div>

<div id="inbox" class="b">
<div id="inboxinbox">
</div>
</div>

<div id="inbox" class="c">
<div id="inboxinbox">
</div>
</div>

</div>