dalis,
Вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title><style>
#service-logo {
position: absolute;
width: 1200px;
height: 520px;
margin: 0 auto;
}
#service-logo li {
float: left;
width: 200px;
height: 520px;
background: #b0b0b0;
border: 2px dashed #d1d1d1;
color: #f6f6f6;
}
#service-logo img {
width: 140px;
margin: 20px 0 0 30px;
}
#service-logo li p {
text-align: center;
margin: 5px 0 0 0;
}
.description {
text-align: center;
line-height: 48px;
}
.more-data {
width: 700px;
max-height: 518px;
position: absolute;
left: -100%;
background: #b0b0b0;
outline: 2px dashed #cdcdcd;
padding: 40px 20px 10px 20px;
color: white;
margin: auto 15%;
}
.service-close {
position: absolute;
top: 7px;
right: 10px;
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<article>
<div class="more-data" id="data-6">Lorem IPSUM Dolor
<p class="service-close" id="close-6">X</p>
</div>
<div style="width: 100%; position: fixed">
<ul id="service-logo">
<li id="click-6">
<p>LOREM IPSUM</p>
<img src="images/service-logos/service-logo-6.png" />
<div class="description">***<br />
Lorem ipsum 1<br />
Lorem ipsum 2<br />
Lorem ipsum 3<br />
Lorem ipsum 4<br />
***</div>
</li>
</ul>
</div>
</article>
<script>
$('#service-logo').on('click', '#click-6', function(e){
$('#service-logo').animate({
left: "+=100%",
}, 1500 );
$('#data-6').animate({
left: "0%",
}, 1500 );
});
$('.more-data').on('click', '#close-6', function(e){
$('#service-logo').animate({
left: "-=100%"
}, 1500 );
$('#data-6').animate({
left: "-100%",
}, 1500 );
});
</script>
</body>
</html>