Image qui monte si il y a de la place

ZauSucre -  
 ZauSucre -
Bonsoir,
Je souhaiterais savoir comment faire pour coller un tas d'image vers le haut quand il on de la place au dessus, un exemple de mon souhait:

http://www.noelshack.com/2017-07-1487408873-tmp-2962-2017-02-18-10-07-251691786119.png

http://www.noelshack.com/2017-07-1487408879-tmp-2962-2017-02-18-10-05-59244731238.png

(J'ai masqué deux photos car ce sont des images que j'ai pris sur le net au hasard pour le développement)

Html:
 <div class="panneau"><a href="http://Google.fr/" rel="nofollow noopener noreferrer" target="_blank"><img class="unimage" src=""quot;https://i.ytimg.com/vi/-157HBpPZ24/maxresdefault.jpg" style="width: 30px; height: 15px;"\></a><a href=""><img class="unimage" src=""quot;http://www.icone-png.com/png/52/52126.png" style="width: 80px; height: 70px;"\></a><a href=""><img class="unimage" src=""quot;http://0.media.collegehumor.cvcdn.com/10/85/0c1ea147af465b27b7ca6f5222560667.jpg" style="width: 60px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;http://0.media.collegehumor.cvcdn.com/10/85/0c1ea147af465b27b7ca6f5222560667.jpg" style="width: 60px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;http://cdn2.boothedog.net/wp-content/uploads/2011/07/Boo-Dog-Christmas.jpg" style="width: 120px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;https://sophosnews.files.wordpress.com/2014/12/lollipop-250.png?w=250" style="width: 15px; height: 15px;"\></a><a href=""><img class="unimage" src=""quot;http://cdn2.boothedog.net/wp-content/uploads/2011/07/Boo-Dog-Christmas.jpg" style="width: 120px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;http://cdn2.boothedog.net/wp-content/uploads/2011/07/Boo-Dog-Christmas.jpg" style="width: 120px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;http://cdn2.boothedog.net/wp-content/uploads/2011/07/Boo-Dog-Christmas.jpg" style="width: 120px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;http://cdn2.boothedog.net/wp-content/uploads/2011/07/Boo-Dog-Christmas.jpg" style="width: 120px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;http://cdn2.boothedog.net/wp-content/uploads/2011/07/Boo-Dog-Christmas.jpg" style="width: 120px; height: 80px;"\></a><a href=""><img class="unimage" src=""quot;https://sophosnews.files.wordpress.com/2014/12/lollipop-250.png?w=250" style="width: 15px; height: 15px;"\></a><a href=""><img class="unimage" src=""quot;https://sophosnews.files.wordpress.com/2014/12/lollipop-250.png?w=250" style="width: 15px; height: 15px;"\></a><a href=""><img class="unimage" src=""quot;https://sophosnews.files.wordpress.com/2014/12/lollipop-250.png?w=250" style="width: 15px; height: 15px;"\></a></div>

Css:
a {
text-decoration: none;
}
html {
height: 100%;
width: 1000px;
}
.war {
color: #C4000E;
margin: 40px;

}
p {
font-size: 26px;
margin: 40px;
}
form {
margin-left: 20px;
text-align: center;
}
.ens{
margin: 10px;
}
.panneau {
width: 1000px;
height: 1000px;
background-color: white;
padding: 0;
}
.right {
float: right;
margin-top: 10px;
}
.unimage {
margin: 0;
display: inline-block;
vertical-align: top;
}
a {
margin: 0;
}
#url {
width: 90%;
height: 40px;
font-size: 20px;
}
#submit {
height: 40px;
font-size: 20px;
}
.titre {
font-size: 50px;
font-weight: bold;
}
.center {
text-align: center;
}
.soustitre {
font-size: 35px;

}
h4 {
text-align: center;
}
body {
position: relative;
min-height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 20px;
    background-color: #CACACA;
}
#content {
}
.img {
width: 95%;
}
#header {
display: inline-block;
margin-bottom: -6px;
width: 100%;
}
.title {
font-size: 23px;
}
#footer {
z-index: 3;
padding: 0;
text-align: center;
display: inline-block;
position: absolute; 
bottom: 0;
width: 100%;
}
.button {
  	
	padding: 2px 8px;
	margin: 8px 8px;
	display: inline-block;
	color: #ffffff;
	font-size: 17px;
	cursor: pointer;
	background: #999999;
	background: linear-gradient(top, #999999 0%, #808080 100%);
	background: -moz-linear-gradient(top, #999999 0%, #808080 100%);
	background: -webkit-linear-gradient(top, #999999 0%, #808080 100%);
	background: -o-linear-gradient(top, #999999 0%, #808080 100%);
	border: 1px solid #2B2B2B;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-o-border-radius: 15px;
	box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0);
	-moz-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0);
	-webkit-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0);
	-o-box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0);
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.50);
}
 .button:hover {
	background: linear-gradient(top, #b3b3b3 0%, #999999 100%);
	background: -moz-linear-gradient(top, #b3b3b3 0%, #999999 100%);
	background: -webkit-linear-gradient(top, #b3b3b3 0%, #999999 100%);
	background: -o-linear-gradient(top, #b3b3b3 0%, #999999 100%);
}
 .button:active{
	opacity:0.8;
}

                 
                 


Merci :D

2 réponses

ZauSucre
 
Up
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Salut,

Quelques solutions possible parmi d'autres :
- http://masonry.desandro.com/ : une bibliothèque javascript connue pour réaliser ce genre d'affichage :
- http://salvattore.com/ : une alternative à Masonry en css
- http://w3bits.com/css-masonry/ : un tutoriel pour créer cet affichage en css

Bonne journée,
0
ZauSucre
 
Merci pour ces liens,

Mais ayant jamais utilisé ces technologies, j'ai un peu de mal à m'y retrouver :/
0