Faire une image de div avec des superpositions de répondre pleinement?

J'ai terminé tout à fait quelques sites responsive, dans le passé, mais je suis aux prises avec ce senario.

Je veux générer cet effet:
http://playwp.equiet.sk/

J'ai créé un jsfiddle de ce que j'ai fait, pour l'une des images les divs. J'ai dépouillé les aspects sensibles, j'ai ajouté que je ne pouvais pas l'obtenir pour fonctionner correctement avec la superposition et espérais que quelqu'un pourrait m'aider à comprendre cela.

Voici mon jsfiddle je veux tourner réactif:
http://jsfiddle.net/mattmagi/ZS7ZA/1/

<div class="one">
  <img src="http://tst.eclipsecreative.ca/3clips3/wp-content/uploads/2013/01/team.jpg"/>
    <div class="two">
      <img src="http://tst.eclipsecreative.ca/3clips3/wp-content/uploads/2013/01/team-hover.jpg"/>
      <div class="info">
        <p class="name">Sally Salamander</p>
        <p class="position">Account Manager</p>
      </div>
      <div class="social">
        <a href="#"><img src="http://www.tompeters.com/_/i/twitter-icon.png" /></a> <a href="#"><img src="http://www.tompeters.com/_/i/twitter-icon.png" /></a> <a href="#"><img src="http://www.tompeters.com/_/i/twitter-icon.png" /></a>
      </div>
  </div>
</div>


.one {
    position: relative;
    background-color: transparent;
}
.two {
    position: relative;
    top: -364px;
    left: 0px;
}
.info {
position: relative;
top: -365px;
padding-top: 30px;
padding-left: 30px;
background-color: transparent;
}
.social {
position: relative;
top: -365px;
padding-top: 15px;
padding-left: 30px;
background-color: transparent;
}
.name {font-size: 24px;}
.position {font-size: 16px;}


EDIT: Ok, voici un autre exemple de ce que je veux dire (ignorer le hover glitch):
http://jsfiddle.net/mattmagi/3d5Jr/

Les blocs vont flotter à la gauche, de sorte que votre navigateur est importante, plus les blocs plus le montrera, mais lors de son entre les deux tailles, je le veux pour remplir automatiquement le navigateur, donc il n'y a jamais d'espace blanc à droite de l'image, de sorte qu'il a à l'échelle pour correspondre.

Merci d'avance.

  • vous dites sensibles, mais il y a beaucoup de façons de le faire. Qu'essayez-vous de faire? Quels sont les éléments que vous voulez afficher ou masquer, plus grande ou plus petite?
  • Voulez-vous l'image à l'échelle de l'écran-ne?
  • Oui im réellement mise en œuvre de ce dans ce thème, j'ai envoyé un lien ci-dessus. Je veux qu'il à toujours remplir l'écran, mais chaque élément ont une largeur min de 540px. Donc, si votre largeur de l'écran est 1440px par exemple, il serait d'afficher seulement deux de large, mais la div à l'/images augmentation de la taille de la mise à l'échelle pour remplir la fenêtre du navigateur. J'ai réussi à obtenir le réactif mais pas réellement échelle. Malade rapidement fouet une page html pour un exemple. Désolé sa fait une longue journée.
  • Ok, voici un exemple de ce que je veux dire: jsfiddle.net/mattmagi/3d5Jr Ils vont flotter à la gauche, de sorte que votre navigateur est importante, plus les blocs plus le montrera, mais lors de son entre les deux tailles, je le veux pour remplir automatiquement le navigateur, donc il n'y a jamais d'espace blanc à droite de l'image, de sorte qu'il a à l'échelle pour correspondre.
InformationsquelleAutor matt | 2013-01-16
  1. 2

    Vous devez utiliser les media queries et le pourcentage des largeurs ..

    De cette façon, vous pouvez définir dans les requêtes de média nombre de colonnes que vous souhaitez en spécifiant la largeur de l'enfant-éléments (dans les pourcentages qui s'accordent parfaitement à 100%), et en rendant les images width:100% à l'intérieur de ces éléments, vous les faire ' échelle automatique..

    Démo à http://jsfiddle.net/gaby/Yz7mf/1/

    (plein écran au http://fiddle.jshell.net/gaby/Yz7mf/1/show/light/)

    Ainsi, pour une structure de 

    <div id="container">
  <div class="item"><img src="http://lorempixel.com/200/150/city/1" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/2" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/3" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/4" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/5" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/6" /></div>
</div>

    Vous pouvez utiliser un Css de

    #container{
    overflow:auto;
}
#container > div{
    float:left;
}
#container > div > img{
    width:100%;
    display:block;
}

@media screen and (max-width:400px){
  #container > div{
    width:50%;
  }
}
@media screen and (min-width:401px) and (max-width:600px){
  #container > div{
    width:25%;
  }
}
@media screen and (min-width:601px){
  #container > div{
    width:20%;
  }
}

    Cela signifie que lorsque le navigateur a une largeur jusqu'à 400px utiliser 2 colonnes, pour la largeur entre 401px 600px et 4 colonnes et pour des largeurs supérieure à 600px l'utilisation de 5 colonnes.

    • Oui merci mais ce n'est pas résoudre mon problème avec le caché div/overlay, je peux obtenir les images pour ce faire, aucun problème, mais il ne fonctionne pas droit quand j'ai l'incrustation est dans mon jsfiddle exemples dans ma question. Laissez-moi savoir si vous pouvez introduire les superpositions dans votre exemple, et je suis vendu.
    • si vous faites le .item dans mon exemple position:relative que vous pouvez ajouter une div à l'intérieur de ce qui est position:absolute avec haut/gauche/droite/bas de 0, de sorte qu'il remplit de son récipient, et à l'intérieur, vous pouvez mettre la légende.. voir fiddle.jshell.net/gaby/Yz7mf/5/show et jsfiddle.net/gaby/Yz7mf/5 (j'ai utilisé certaines transitions pour mettre en valeur certains des effets, mais j'ai seulement compris la syntaxe standard.. vous voudrez peut-être ajouter de fournisseur de préfixes pour le faire fonctionner à travers les navigateurs..)
    • Merci beaucoup, mais mon problème est que je veux la superposition à une autre image, ou aller à partir de niveaux de gris à la couleur...serait-ce encore du travail de même d'avoir une autre image dans la 2e div?
    • EDIT: Pense que j'ai eu c'est ici: jsfiddle.net/mattmagi/Yz7mf/7 (son uniquement sur la 1ère image)
    InformationsquelleAutor Gabriele Petrioli
  2. 0

    J'ai trouvé cet exemple de ce que tu veux dire:

    http://dabblet.com/gist/2778608

    Cela devrait aider. Je ne suis pas sûr de savoir comment intégrer les survolez avec cette même si. Laissez-moi savoir si vous trouver.

    Aussi, essayez d'utiliser un réactif cadre d'économiser des charges de temps:

    http://foundation.zurb.com

    • Je ne l'utilisation de Zurb mon seul problème est la superposition, je peux obtenir des images simples pour ce faire, pas de problème également votre exemple n'a pas d'images en plein écran sous forme de grille (côte à côte). Merci bien.
    InformationsquelleAutor Oly