<style>@import 'https://fonts.googleapis.com/css?family=Roboto';.shipper-wrap {width: 500px;height: 400px;background-color: #0F0E10;position: relative;margin: auto;overflow: hidden;}.shipper-wrap .shipper-bg {width: 500px;position: absolute;transform: scale(1);filter: blur(0);transition: all 0.3s;}.shipper-pr {width: 200px;background-color: #0F0E10;box-sizing: border-box;padding: 10px;position: absolute;bottom: 10px;left: 10px;transform: translate(0, 0);transition: all 0.5s;}.shipper-pr h2,.shipper-lien h2 {margin: 0 0 5px;text-transform: uppercase;color: #fff;font-family: Georgia, serif;font-style: italic;font-size: 15px;}.shipper-pr p,.shipper-lien .shipper-desc {margin: 0;color: #fff;font-family: Georgia, serif;font-size: 11px;text-align: justify;line-height: 130%;}.shipper-ask {height: 200px;width: 480px;background-color: #fff;box-sizing: border-box;padding: 10px 0 10px 10px;position: absolute;bottom: 10px;right: 10px;font-family: Georgia, serif;font-size: 10px;text-align: justify;transform: translate(110%, 0);transition: all 0.5s;}.shipper-ask > div {height: 100%;width: 100%;box-sizing: border-box;padding-right: 10px;overflow: auto;}.shipper-ask > div div,.shipper-lien .shipper-desc div {background-color: #0F0E10;padding: 5px;color: #fff;text-transform: uppercase;min-width: 100px;letter-spacing: 3px;text-align: center;font-family: 'Roboto', sans-serif;font-size: 8px;float: left;margin: 0 10px 0 0;}.shipper-ask hr {border-top: 1px dotted #0F0E10;border-bottom:0;height: 0;margin: 10px 0;}.shipper-wrap:hover .shipper-ask, .shipper-wrap:hover .credit {transform: translate(0, 0);}.shipper-wrap:hover .shipper-pr {transform: translate(-110%, 0);}.shipper-wrap:hover .shipper-bg {transform: scale(1.5);filter: blur(5px);}.shipper-lien {width: 500px;background-color: #0F0E10;position: relative;margin: 10px auto;box-sizing: border-box;padding: 10px;}.shipper-lien .shipper-lien-case {margin: 0 0 10px;display: flex;}.shipper-lien .shipper-lien-case:last-child {margin: 0;}.shipper-lien img {width: 100px;}.shipper-lien .shipper-desc {color: #0F0E10;height: 100px;background-color: #fff;box-sizing: border-box;padding-right: 10px;overflow: auto;flex: 1;border: 10px solid #fff;border-right: 0;}.credit {width: 500px;margin: 0px auto 10px;line-height: 9px;}.credit a {text-decoration: none!important;color: #ccc!important;letter-spacing: 2px;font-size: 7px;text-transform: uppercase;font-family: 'Roboto', sans-serif;}.shipper-ask::-webkit-scrollbar, .shipper-desc::-webkit-scrollbar { width: 2px;}.shipper-ask::-webkit-scrollbar-track, .shipper-desc::-webkit-scrollbar-track { background-color: #ccc;}.shipper-ask::-webkit-scrollbar-thumb, .shipper-desc::-webkit-scrollbar-thumb { background-color: #0F0E10; }</style>
<div class="shipper-wrap"><!--
Image de fond
--><img src="https://2img.net/image.noelshack.com/fichiers/2017/25/7/1498408830-wo-class-kantai-collection-full-1981912.jpg" alt="" class="shipper-bg" /><!--
Case de description (elle s'étire automatiquement mais évitez de faire trop long)
--><div class="shipper-pr"><!--
--><h2>Back to black.</h2><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div><div class="shipper-ask"><div><!--
--><div>Friends</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<!--
--><hr /><!--
--><div>Ennemies</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<!--
--><hr /><!--
--><div>Others</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<!--
--><hr />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div></div><div class="credit"><a href="http://terrible.forumactif.org/" target="_blank">awful</a></div><!--



--><div class="shipper-lien"><h2>Friends</h2><!--
Case de description avec image + texte
--><div class="shipper-lien-case"><img src="http://placehold.it/100x100" alt="" /><div class="shipper-desc"><!--
--><div>Nom prénom</div><!--
-->Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div><!--

--><div class="shipper-lien-case"><img src="http://placehold.it/100x100" alt="" /><div class="shipper-desc"><!--
--><div>Nom prénom</div><!--
-->Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div></div></div><!--



--><div class="shipper-lien"><h2>Ennemies</h2><!--
Case de description avec image + texte
--><div class="shipper-lien-case"><img src="http://placehold.it/100x100" alt="" /><div class="shipper-desc"><!--
--><div>Nom prénom</div><!--
-->Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div></div><!--

--><div class="shipper-lien-case"><img src="http://placehold.it/100x100" alt="" /><div class="shipper-desc"><!--
--><div>Nom prénom</div><!--
-->Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div></div></div>