pseudo

pseudo

titre pas trop long

#les images sont automatiquements en b&w et a 200*200
#NE SURTOUT PAS TOUCHER AUX CODES entre les balises style
#dans le cas d'un titre trop long, la taille est modifiable (tout à la fin des balises 'style', font-size: 40px, ajuster les pixels)
#en cas de besoin, le ctrl+f est votre ami; les balises d'images sont les seules en haut
#Si jamais le bleu pose problème je peux faire différentes versions sans problème!
#pas de redistribution, et que pour TLS, merci ♥

Code:

<div class="header" style="width: 500px; height: 400px;background: url('http://i.imgur.com/nbQuvD8.png'); position: relative; z-index: 2">
<div style="padding-top: 70px; width: 400px;height: 200px; margin-left: 50px"><div class="pseudorsls">pseudo</div><div class="pseudorsls">pseudo</div><img src="http://i.imgur.com/AdWnmvo.png" class="imgrsls"><img src="http://i.imgur.com/kJNnR1L.jpg" class="imgrsls"></div>
<div class="TITLE">titre pas trop long</div></div><div style="width: 500px; background: #ebebeb; margin-top: -100px; position: relative; z-index: 1; padding-bottom: 50px">
<div style="margin-top: 70px; width: 350px; margin-left: 50px; border-left: 6px solid #cde5ec; padding-left: 19px; text-align: justify; color: dimgrey; font-size: 11px; line-height: 95%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate commodo erat sed aliquet. Morbi iaculis elementum lectus, et gravida tellus pretium a. Vestibulum sagittis tempus augue, at adipiscing sem fermentum eu. Maecenas lacinia pretium auctor. Vivamus magna massa, rutrum nec mattis sit amet, sagittis et eros. Duis congue enim ut nisl dignissim tempus. Nullam interdum est ac leo sodales iaculis. Sed malesuada faucibus sapien, a accumsan lectus mollis id.</div>
</div><img src="http://i.imgur.com/6cYB9FR.png" style="margin-top: -70px; position: relative; z-index: 2">

<style>.imgrsls{opacity: 0.8; height: 200px; width: 200px; filter: grayscale(100%); -webkit-filter: grayscale(100%); filter: gray; position: relative; z-index: 3; margin-top: -200px}.pseudorsls{position: relative; z-index: 4; background: white; vertical-align: middle; display: table-cell; height: 200px; width: 200px; opacity: 0; transition: all ease 0.5s; text-align: center; color: dimgrey; font-family: georgia; text-shadow: 1px 1px 0px white; font-size: 10px; text-transform: uppercase; letter-spacing: -1px }.header:hover .pseudorsls{opacity: 0.9}.TITLE{font-family: 'Cormorant Garamond', serif; text-align: center; color: #cde5ec; font-size: 40px; text-transform: uppercase}</style><link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">