Bonjour, comment faire en sorte que ma gallerie d'image qui au passage de la sourris affiche un hover avec une information soit en background et prend toute la largeur de ma page ? SVP SVP SVP
Sachant que pour faire ma gallerie d'image j'ai créer un conteneur (en position relative) dans lequel j'ai mis plusieurs div (en position absolute) contenant chacun une image (que j'ai plaçé avec top et left).
ps : j'ai pas trouver un layout de plungin qui me permet de placer mes image comme je le souhaite, du coup j'ai fait comme ça.
Image :
8 réponses
Salut,
Encore une fois j'ai pas accès à l'image (désolé).
De manière générale je n'ai pas trop compris ce que tu cherches à faire. Tu pourrais me dire où tu en es et ce que tu chercher à faire clairement ? x)
Salut @Canonier,
c'est bizarre que tu ne peux pas accéder à l'image.
voici un autre lien : http://zupimages.net/viewer.php?id=16/29/3al1.png
En fait, je suis entrain de créer une galerrie d'image en mosaique que je placerais en background de mon site (qui occupe tout l'écran)
Et j'aimerais au passage de la sourris sur chacuns des images, il y a un hover avec un fond noir transparent qui affiche une description.
Et en dernier je veux que ma gallerie en background s' adapte a chaque type d'écran (donc responsive).
Salut @Advancid,
J'ai déjà éssayer mais ça ne fonction pas car j'ai pas qu'un seul image mais une gallerie d'image.
Voilà mon code HTML:
<div class="conteneur_mosaique">
<div class="imgMosaique1"> <img class="img1" src="img3/asc_left01.jpg" height="270" width="180" alt=""> </div>
<div class="imgMosaique2"> <img class="img2" src="img3/asc_left02.jpg" height="270" width="180" alt=""> </div>
<div class="imgMosaique3"> <img class="img3" src="img3/asc_left03.jpg" height="270" width="180" alt=""> </div>
<div class="imgMosaique4"> <img class="img4" src="img3/asc_left04.jpg" height="90" width="180" alt=""> </div>
<div class="imgMosaique5"> <img class="img5" src="img3/asc_left05.jpg" height="74" width="270" alt=""> </div>
<div class="imgMosaique6"> <img class="img6" src="img3/asc_left06.jpg" height="340" width="270" alt=""> </div>
<div class="imgMosaique7"> <img class="img7" src="img3/asc_left07.jpg" height="340" width="270" alt=""> </div>
<div class="imgMosaique8"> <img class="img8" src="img3/asc_left08.jpg" height="146" width="270" alt=""> </div>
<div class="imgMosaique9"> <img class="img9" src="img3/asc_middleTop.jpg" height="74" width="540" alt=""> </div>
<div class="imgMosaique10"> <img class="img10" src="img3/asc_middleCenter.jpg" height="682" width="540" alt=""> </div>
<div class="imgMosaique11"> <img class="img11" src="img3/asc_middleBottom01.jpg" height="146" width="180" alt=""> </div>
<div class="imgMosaique12"> <img class="img12" src="img3/asc_middleBottom02.jpg" height="146" width="180" alt=""> </div>
<div class="imgMosaique13"> <img class="img13" src="img3/asc_middleBottom03.jpg" height="146" width="180" alt=""> </div>
<div class="imgMosaique14"> <img class="img14" src="img3/asc_right01.jpg" height="74" width="270" alt=""> </div>
<div class="imgMosaique15"> <img class="img15" src="img3/asc_right02.jpg" height="340" width="270" alt=""> </div>
<div class="imgMosaique16"> <img class="img16" src="img3/asc_right03.jpg" height="340" width="270" alt=""> </div>
<div class="imgMosaique17"> <img class="img17" src="img3/asc_right04.jpg" height="146" width="270" alt=""> </div>
<div class="imgMosaique18"> <img class="img18" src="img3/asc_right05.jpg" height="270" width="180" alt=""> </div>
<div class="imgMosaique19"> <img class="img19" src="img3/asc_right06.jpg" height="630" width="180" alt=""> </div>
</div>Et mon code css :
body{margin: 0px; padding: 0px; width: 100%}
div.conteneur_mosaique{
position: relative;
margin-left: auto;
margin-right: auto;
}
/* ---- DIV IMG ---- */
div{
position: absolute;
}
div.imgMosaique1{
top:0;
left:0;
}
div.imgMosaique2{
top:270px;
left:0;
}
div.imgMosaique3{
top:540px;
left:0;
}
div.imgMosaique4{
top:810px;
left:0;
}
div.imgMosaique5{
top:0;
left:180px;
}
div.imgMosaique6{
top:74px;
left:180px;
}
div.imgMosaique7{
top:414px;
left:180px;
}
div.imgMosaique8{
top:754px;
left:180px;
}
div.imgMosaique9{
top:0;
left:450px;
}
div.imgMosaique10{
top:74px;
left:450px;
}
div.imgMosaique11{
top:754px;
left:450px;
}
div.imgMosaique12{
top:754px;
left:630px;
}
div.imgMosaique13{
top:754px;
left:810px;
}
div.imgMosaique14{
top:0px;
left:990px;
}
div.imgMosaique15{
top:74px;
left:990px;
}
div.imgMosaique16{
top:414px;
left:990px
}
div.imgMosaique17{
top:754px;
left:990px;
}
div.imgMosaique18{
top:0px;
left:1260px;
}
div.imgMosaique19{
top:270px;
left:1260px;
}Merci pour le lien, malheureusement c'est le réseau sur lequel je suis qui est très restrictif au niveau des urls (c'est un réseau d'entreprise donc la masse de sécurité dessus). Donc peu importe le lien, je n'aurais pas la chance de voir l'image qui est pointée :/
En ce qui concerne ton projet :
1- responsive
Tu as regardé vers bootstrap / foundation pour avoir un responsive efficace ? Tu as réussi à l'utiliser ?
2 - Effet de survole
Considèrons une zone qui représente ton image au sein de ta mosaique (cette zone aura l'idée "zone" par exemple).
Sur la zone de départ tu auras appliqué en css l'attribut background-image (avec l'url de l'image) et backgroud-size : cover.
Places-y une div dont tu appliques en css l'opacité à zero. Dans cette div tu y inscrit tes textes / descriptions qui sont donc invisible pour le moment. Voici le css de la div en question :
#zone div{
opacity: 0; // invisible
background-color: rgba(0, 0, 0, 0.5); // fond noir, transparent à 50%
transition: 0.3s; // pour le style
}
// lors du hover :
#zone div.hover{
opacity: 1; // visible
transition:0.2s; // pour le style
}EDIT
J'ai vu ton second msg apres
La solution en absolue n'est pas optimale je pense.. (à moins que je n'ai pas compris l'objectif final ^^).
Le system de grille devrait etre plus efficace : http://getbootstrap.com/css/#grid-options
Canonier
Dois je priciser le width et height de l'image aussi ? car quand je mets width : 100%; , l'image prend tout la largeur de la page. Et si je ne me trompe pas , pour que ça soit responsive faut que je précise le width à 100% non ?
oui j'ai vu le système de grille , mais je ne sais pas encore comment l'utiliser ....
Je pense qu'il faut que tu projetes ton travail de façon plus méthodique :/
Tu es déjà en train de penser aux placements de tes images et à leurs effets alors que tu n'as pas encore une grille responsive en place. Tu peux toujours essayer de parvenir à placer tes images comme il faut pour ton ecran, mais il va te falloir énormément de "media-queries" pour que le 'responsive' soit effectif sur tous les formats d'écran.
Ce que je te conseille :
1- regarde le tutos sur bootstrap de Graf' : https://www.grafikart.fr/tutoriels/html-css/bootstrap-twitter-182 (le tuto est un peu vieux mais l'idée générale reste la meme)
Ca te donnera les bases de ce que c'est, et ça te permettra de mieux comprendre la philosophie de l'outil.
(mais surtout lis la doc : http://getbootstrap.com/ !)
2- Une fois que tu as regardé commence à tatter le fonctionnement des grilles pour ton cas perso.
(je te conseille de prendre le "container-fluide" et d'y insérer une "row" qui aura autant de "col-xx-yy" que d'images dans ta mosaique).
N'hésite pas à ajouter des lorem ipsum dans une div au sein de ces "col-xx-yy" pour voir comment ça réagit !
3- Une fois ton système de grille fonctionnel, tu passes au design :
Ajout des images (en background-image et background-size:cover, comme ça tu n'auras pas à te soucier de leur dimensionnement).
Ajout des styles css pour l'effet hover (expliqué plus haut).
4- Tu peux enfin faire mumuse x)
Avec le vh la .classe #id prendre toujours 100% de la hauteur de l’écran de la personne que tu sois sur pc mobile au tabs ;)
Donc de me pour le vw