Zoom décalé au survol

Zoom décalé au survol - HTML/CSS - Programmation

Marsh Posté le 03-09-2013 à 10:20:54    

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

Reply

Marsh Posté le 03-09-2013 à 10:20:54   

Reply

Marsh Posté le 15-10-2013 à 21:41:11    

Bonsoir,  
 
Voila le code que vous cherchez à faire si j'ai bien compris.  
 
La partie Html :  

Code :
  1. <div id="diaporama">
  3. <ul class="min">
  4.  <li class="1"><img src="http://img1.ndsstatic.com/wallpapers/33c49401c1c98562c1ebaf5c8ded2b04_large.jpeg" alt="30 seconds to mars" />
  5.   <ul class="max hover">
  6.    <li class="1"><img src="http://img1.ndsstatic.com/wallpapers/33c49401c1c98562c1ebaf5c8ded2b04_large.jpeg" alt="30 seconds to mars" /></li>
  7.   </ul></li>
  8.  <li class="1"><img src="http://upload.wikimedia.org/wikipedia/commons/d/da/Shooting_Fatals.jpg" alt="fatals picards" />
  9.   <ul class="max">
  10.    <li class="1"><img src="http://upload.wikimedia.org/wikipedia/commons/d/da/Shooting_Fatals.jpg" alt="fatals picards" /></li>
  11.   </ul></li>
  12.  <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" />
  13.   <ul class="max">
  14.    <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>
  15.   </ul></li>
  17.  <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" />
  18.   <ul class="max">
  19.    <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>
  20.   </ul></li>
  21.  <li class=""><img src="http://img.planet.fr/01_planet/actu/dossier_redac/Chanteurs2011/Christoph_Mae.jpg" alt="fatals picards" />
  22.   <ul class="max">
  23.    <li class="1"><img src="http://img.planet.fr/01_planet/actu/dossier_redac/Chanteurs2011/Christoph_Mae.jpg" alt="fatals picards" /></li>
  24.   </ul></li>
  25.  <li class=""><img src="http://upload.wikimedia.org/wikipedia/commons/4/48/Macklemore_The_Heist_Tour_1.jpg" alt="coldplay" />
  26.   <ul class="max">
  27.    <li class="1"><img src="http://upload.wikimedia.org/wikipedia/commons/4/48/Macklemore_The_Heist_Tour_1.jpg" alt="coldplay" /></li>
  28.   </ul></li>
  30. </ul>
  31.  
  33.    </div>


 
Et la partie Css :  
 

Code :
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td,
  10. article, aside, canvas, details, embed,
  11. figure, figcaption, footer, header, hgroup,
  12. menu, nav, output, ruby, section, summary,
  13. time, mark, audio, video {
  14.  margin: 0;
  15.  padding: 0;
  16.  border: 0;
  17.  font-size: 100%;
  18.  font: inherit;
  19.  vertical-align: baseline;}
  20. article, aside, details, figcaption, figure,
  21. footer, header, hgroup, menu, nav, section {
  22.  display: block;}
  23. body {
  24.  line-height: 1;}
  25. ol, ul {
  26.  list-style: none;}
  27. blockquote, q {
  28.  quotes: none;}
  29. blockquote:before, blockquote:after,
  30. q:before, q:after {
  31.  content: '';
  32.  content: none;}
  33. table {
  34.  border-collapse: collapse;
  35.  border-spacing: 0;}
  36.  #diaporama{
  37.   width:1000px;
  38.   height:600px;
  39.   background-image: url(http://adsdesignstudio.fr/cp/img/fond-diap.jpg);
  40.   background-position: 50% 15%;
  41.   overflow:hidden;}
  42.  ul.min{
  43.   position:absolute;
  44.   width:100%;
  45.   text-align:center;}
  46.  ul.min li{
  47.   margin-left:930px;
  48.   overflow:hidden;
  49.   height:70px;
  50.   width:70px;}
  51.  ul.min > li > img{
  52.   height:70px;
  53.   margin-left:-30%;}
  54.  ul.min li:hover ul.max{
  55.   display:block;
  56.   z-index:2;
  57.   left:0%;}
  58.  ul.max{
  59.   position:absolute;
  60.   left:-20%;
  61.   -webkit-transition: all 0.3s ease;
  62.   -o-transition: all 0.3s ease;
  63.   -moz-transition: all 0.3s ease;
  64.   -ms-transition: all 0.3s ease;
  65.   transition: all 0.3s ease;
  66.   top:0%;
  67.   z-index:-1;}
  68.  ul.max li{
  69.   width:930px;
  70.   height:600px;
  71.   overflow:hidden;
  72.   position:absolute;
  73.   margin:0px;
  74.   padding:0px;}
  75.  ul.max li img{
  76.   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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed