Des images pop-up dans une forme sphérique en css !!

Bonjour à vous,

Une page de mon site web ( http://eloik.com/MondeReves.html ) comporte des petites images qui s'affichent d'une façon assez originale (css et javascript) mais j'aimerais les repositionner en forme sphérique (dans la sphère) et je ne sais comment m'y prendre... J'ai essayé plusieurs fois de changer les codes "li" en "table (td)" mais en vainc...


Si vous pouviez me donnez un coup de main, ce serait très apprécié !

Merci et bonne fin de journée !
Modifié par seblev (10 Apr 2015 - 00:30)

Voici mon code css :

.pe-thumbs{
width: 700px;

height: 700px;

margin: 20px auto;

position: relative;

background: url(../images/3f.png) top center;

border: 0px solid #fff;


}

.pe-thumbs:before {
content: "";

position: absolute;
top: 0px;
left: 0px;
width: 100%;

height: 100%;
background: rgba(120,97,75, 0);
}

.pe-thumbs li{
float:left;
margin: 20px auto; padding: 5px 0px;
position: relative;
}

.pe-thumbs li a,

.pe-thumbs li a img{
display: block;
position: relative;
}

.pe-thumbs li a img{
width: 100px;

opacity: 1;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);

transform: scale(0);
}

.pe-thumbs li a div.pe-description{
width: 200px;

height: 200px;

background: rgba(0,0,0,1.0);

position: absolute;

top: 0px;

left: -200px;

color: rgba(255,255,255,1.0);

display: none;
z-index: 1001;

text-align: left;
}

.pe-description h3{
padding: 5px 10px 0px 10px;

line-height: 15px;

font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;

font-size: 22px;

font-color: rgba(12,27,235,1.0)
margin: 0px;
}

.pe-description p{
padding: 5px 0px;

margin: 10px;
font-size: 11px;

font-style: italic;

border-top: 1px solid rgba(255,255,255,0.3);
}