Zoom décalé au survol

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Zoom décalé au survol

illireas

Bonjour, j'ai un projet de site a faire avec confection des images le composant. Parti graphique aucun souci mais la partie html/css c'est plus compliqué pour moi.. xD
Je voulais donc faire quelque chose comme ca : http://adsdesignstudio.fr/cp/2.html
Je me suis inspiré du code mais chez moi.. ca ne marche pas!! V

Voici mon html:

<div id="diaporama">

<div class="centre"></div>

<div class="bas">

<img src="img/apple.jpg" alt="apple"/>
<img src="img/mylittlepresent.jpg" alt="mylittlepresent"/>
<img src="img/floral.jpg" alt="floral"/>
<img src="img/invasion.jpg" alt="invasion"/>
<img src="img/smoke.jpg" alt="smoke"/>
<img src="img/naturless.jpg" alt="naturless"/>
<img src="img/free.jpg" alt="free"/>
<img src="img/octopus.jpg" alt="octopus"/>
<img src="img/collage.jpg" alt="collage"/>
<img src="img/swift.jpg" alt="swift"/>
<img src="img/way.jpg" alt="way"/>

</div>

</div>

Et css :

#diaporama div img + .grande {
display:none;
}

#diaporama div img:hover + .grande {
display:inline;
position:absolute;
width:740px;
left:0px;
height:440px;
top:0px;
margin-top:0px;
}

#diaporama div img:hover + .vert {
display:inline;
position:absolute;
width:740px;
margin-left:25%;
height:440px;
top:0px;
margin-top:0px;
}

#diaporama img {
float:left;
width:50px;
height:35px;
}

#diaporama .bas {
width:70px;
height:90px;
float: right;
}

#diaporama .centre {
float:left;
width:500px;
height:355px;
}

J'ai vraiment trés peu de temps pour le faire, donc si quelqu'un pouvais m'aider rapidement je lui serai vraiment trés reconnaissante! Merci

Publicité

joueur_inconnu

Bonsoir,

Voila le code que vous cherchez à faire si j'ai bien compris.

La partie Html :

Code :

<div id="diaporama">
<ul class="min">
<li class="1"><img src="http://img1.ndsstatic.com/wallpapers/33c49401c1c98562c1ebaf5c8ded2b04_large.jpeg" alt="30 seconds to mars" />
<ul class="max hover">
<li class="1"><img src="http://img1.ndsstatic.com/wallpapers/33c49401c1c98562c1ebaf5c8ded2b04_large.jpeg" alt="30 seconds to mars" /></li>
</ul></li>
<li class="1"><img src="http://upload.wikimedia.org/wikipedia/commons/d/da/Shooting_Fatals.jpg" alt="fatals picards" />
<ul class="max">
<li class="1"><img src="http://upload.wikimedia.org/wikipedia/commons/d/da/Shooting_Fatals.jpg" alt="fatals picards" /></li>
</ul></li>
<li class="1"><img src="http://images5.fanpop.com/image/photos/27700000/On-Stage-Under-1-Roof-December-10-2011-coldplay-27727548-2560-1703.jpg" alt="coldplay" />
<ul class="max">
<li class="1"><img src="http://images5.fanpop.com/image/photos/27700000/On-Stage-Under-1-Roof-December-10-2011-coldplay-27727548-2560-1703.jpg" alt="coldplay" /></li>
</ul></li>
<li class="1"><img src="http://images.ados.fr/1/stars-people/indochine-3/photo/hd/7567661756/22961072c3/indochine-3-indo-color-simple-big.jpg" alt="indochine" />
<ul class="max">
<li class="1"><img src="http://images.ados.fr/1/stars-people/indochine-3/photo/hd/7567661756/22961072c3/indochine-3-indo-color-simple-big.jpg" alt="indochine" /></li>
</ul></li>
<li class=""><img src="http://img.planet.fr/01_planet/actu/dossier_redac/Chanteurs2011/Christoph_Mae.jpg" alt="fatals picards" />
<ul class="max">
<li class="1"><img src="http://img.planet.fr/01_planet/actu/dossier_redac/Chanteurs2011/Christoph_Mae.jpg" alt="fatals picards" /></li>
</ul></li>
<li class=""><img src="http://upload.wikimedia.org/wikipedia/commons/4/48/Macklemore_The_Heist_Tour_1.jpg" alt="coldplay" />
<ul class="max">
<li class="1"><img src="http://upload.wikimedia.org/wikipedia/commons/4/48/Macklemore_The_Heist_Tour_1.jpg" alt="coldplay" /></li>
</ul></li>
</ul>
</div>

Et la partie Css :

Code :

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;}
body {
line-height: 1;}
ol, ul {
list-style: none;}
blockquote, q {
quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;}
table {
border-collapse: collapse;
border-spacing: 0;}
#diaporama{
width:1000px;
height:600px;
background-image: url(http://adsdesignstudio.fr/cp/img/fond-diap.jpg);
background-position: 50% 15%;
overflow:hidden;}
ul.min{
position:absolute;
width:100%;
text-align:center;}
ul.min li{
margin-left:930px;
overflow:hidden;
height:70px;
width:70px;}
ul.min > li > img{
height:70px;
margin-left:-30%;}
ul.min li:hover ul.max{
display:block;
z-index:2;
left:0%;}
ul.max{
position:absolute;
left:-20%;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
top:0%;
z-index:-1;}
ul.max li{
width:930px;
height:600px;
overflow:hidden;
position:absolute;
margin:0px;
padding:0px;}
ul.max li img{
height:120%;}

Le début du code permet de faire un reset, le reset va jusqu'à la ligne 35.

Dites moi si c'est cela que vous recherchez ?

Cordialement, Dimitri

Message édité par joueur_inconnu le 15-10-2013 à 21:44:28

FORUM HardWare.fr

Programmation

HTML/CSS

Zoom décalé au survol

Sujets relatifs
mail html tableau décalé	Intégrer une page GLPI + zoom
[VBnet] Agrandir listbox/combobox au survol ? (PIC inside)	image cliquable et modifiée partiellement au survol
Agrandir images avec survol de la souris	Placement image lors d'un zoom, Chrome
Problème image d'un header qui se décale sous IE	Question sur un thème Tumblr, une div qui décale tout
Survol jTabbedPane (J2SE)	Couleurs survol souris différent selon endroit sur la page
Plus de sujets relatifs à : Zoom décalé au survol

Page générée en 0.045 secondes