Positionnement et float

Bonjour,

J'ai un souci avec des photos positionnées en float, par-dessus lesquelles je souhaite afficher une autre image au survol...

Mes photos de base sont contribuées comme ça:

<div id="new">
	<img src="img/MG_6644.png" class="petit">
	<img src="img/MG_6639.png" class="petit">
	<img src="img/MG_6645.png" class="petit">
</div

Avec le css:

#new { width: 100%; background: #000; }
#new .petit { width: 11.02%; margin: 0 0.1% 0.1% 0; vertical-align: top; float: left; }

Les tailles des photos et margin sont en % parce qu'elles doivent rester adaptées à la largeur de la fenêtre.

Jusque là, tout va bien

Pour afficher une nouvelle image par-dessus les photos présentes, j'avais pensé à quelque chose comme ça:

<a href="#">
		<span class="roll"></span>
		<img src="img/MG_6419.png" class="grand">
</a>

Et le code CSS:

span.roll {
	opacity: 0;
	background:url(img/loupe.png) center center no-repeat #000;
	cursor: pointer;
	width: 22.04%;
	height: 24.9%;
	position: absolute;
}

span.roll:hover {
	opacity: .7;
}

Je précise, l'image qui vient par-dessus les photos est la même, quelque soit la photo.

... Mais position: absolute ne semble pas être copain avec float: left

Quelqu'un aurait une idée, ou une piste?

Merci beaucoup, je sèche, là...

salut,
déjà le coup des largeurs en "%", je ne suis pas trop sûr. Ça donnera l'impression d'un site par très sérieux et d'un travail fait à la va-vite. Quel serait le résultat pour une très petite largeur d'écran ?
Pour revenir à ta problématique, tu peux faire plus simple. Je suppose que c'est une sorte d'image en forme de loupe ou de "+" qui permettrait de zoomer.
Le mieux que tu puisse faire, c'est de mettre directement ton <img> "petit" dans un <span> à qui tu donnerait un "background" faisant référence à cette image de loupe. Puis au ":hover", tu changerais l'opacité de <img> "petit" pour faire apparaître la loupe derrière.

Hello

Je note la très bonne idée de mettre la loupe en background, et la photo par dessus qui deviendra transparente au survol. Je pense que l'effet sera OK.

...Mais je suis quand même preneur de savoir pourquoi je ne suis pas arrivé à coupler position: absolute sur un bloc et float: left sur un autre?

Quant aux tailles d'images en %, j'ai (bêtement) voulu obtenir cet effet-là. Je n'ai pas totalement réussi (d'ailleurs si quelqu'un pouvait aussi m'expliquer le fonctionnement des images en mosaïques et 100% de la largeur de la page: bibliothèque? full-css?); au final je suis plutôt content d'être arrivé à faire un effet similaire.

Je suppose que si la position absolue n'a pas pris, c'est que son parent direct n'était pas en position relative. Un élément en position absolue se réfère à son premier ancêtre ayant une position autre que "static".
Pour l'effet que tu recherches, il a surement dû être fait avec Masonry mais je ne sais pas, je n'ai pas vu le code.