Image qui monte si il y a de la place
ZauSucre
-
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:
Css:
Merci :D
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
A voir également:
- Image qui monte si il y a de la place
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? - Forum Graphisme
- Meilleur place accor arena ✓ - Forum Loisirs / Divertissements
- Image iso - Guide
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image d’ours polaire sur une image de plage. retrouvez l'image originale de la plage. que cache l'ours polaire ? - Forum Graphisme
- Comment faire de la place sur gmail - Guide
2 réponses
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,
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,