Positionner verticalement une image à l'intérieur d'un div

Question

J'ai un problème avec lequel j'aimerais de l'aide. Heureusement, mon code peut être flexible, donc je vais juste donner un balisage générique.

Ma principale limitation (en raison de la façon dont je récupère les informations d'une base de données) est que les images ne peuvent pas être des images d'arrière-plan, sinon ce serait facile.

Je veux simplement qu'une image change lorsque je la survole. J'ai fait une image deux fois plus haute que j'en ai besoin - moitié couleur, moitié noir et blanc. L'idée est, l'image est exactement la même (une personne) - mais quand vous passez la souris dessus - vous voyez la version en couleur.

J'ai construit mon image «planant» de 200 pixels de large et 400 pixels de haut. Elle est marquée très simplement:

<div class='staff_profile'> 
    <h3>Staff Title</h3> 
    <div class='staff_image'> 
     <img src='.....' alt='....' /> 
    </div> 
</div> 

Je suis Figuring je besoin de quelque chose comme:

.staff_image { 
    float: left; 
    height: 200px; 
    width: 200px; 
} 

Le problème est - en utilisant cela, les 400px image haute affiche par défaut dans le centre de cette staff_image div - donc je vois la moitié de la photo en noir et blanc, et la moitié de la couleur.

Je vais utiliser jQuery pour faire le vol stationnaire - donc juste besoin de quelques conseils CSS sur ce que les propriétés que je dois utiliser pour:

1. Avoir l'affichage d'image au sommet
2. Avoir la affichage de l'image à mi-chemin

Tout ce que j'essaie avec le rembourrage et la marge semble pousser tout le contenu vers le bas, et ne déplace pas du tout l'image réelle du tout. J'ai fondamentalement besoin de savoir comment manoeuvrer une image qui est trop grande pour une div fixe de hauteur autour de ce div. Et aucune des réponses que je peux trouver ici ne semble aider. Il y en a beaucoup sur le centrage d'une image - mais le centrage n'est PAS ce que je veux faire - c'est le contraire! :)

Merci pour toute aide.

Answer 1

Ici, vous allez: http://jsfiddle.net/xqxSK/

<div class='staff_profile'> 
    <h3>Staff Title</h3> 
    <div class='staff_image'> 
     <img src='http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6' /> 
    </div> 
</div> 

.staff_image { 
    overflow: hidden; 
    height: 200px; 
} 
.staff_image img { 
    position: relative; 
} 

.staff_image:hover img { 
    top: -200px; 
} 

J'utilise CSS au lieu de jquery pour le vol stationnaire. C'est une meilleure approche, car cela fonctionne mieux sur les appareils à écran tactile.