• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

growing Thumbnails bei hover und responsives grid

Franz

Franz

Neues Mitglied
Hallo Kommune,

Mein Ergebnis soll sein: Ein Grid, etwa 42x42 mit quadratischen Thumbnails. Diese wachsen bei hover auf zB.300% an, umliegende Thumbnails finden neuen Platz im Grid. Habe jetzt mehrere Stunden gegoogelt aber fluid, flexible und liquid bringen mich iwie nicht weiter und ich habe auch leider kein Beispiel gefunden, glaube aber, dass ich es schon mehrmals gesehen habe...für einen tipp oder einen link wäre ich sehr dankbar...
 
Werbung:
Hallo djheke,
habe hier was in der Richtung gefunden.

http://buildinternet.com/live/elasticthumbs/

Das ist eigentlich was ich suche, nur halt in mehreren Zeilen

Die Anzahl der Bilder variiert, fängt aber so bei 15 an..
"neuer Platz" ist wohl irreführend. Ich meinte: die übrigen Thumbnails verschieben sich in dem Maße, in dem sich das "gehoverte" vergrößert.
Wenn man dann mit dem Mauszeiger oder mit dem Finger über das Raster fährt hätte man eine Art Fischaugeneffekt. Werde mal sehen, was sich mit den elasticthumbs anstellen lässt, bin aber weiterhin für Vorschläge dankbar!!!
 
Werbung:
Also habe das mal mit nem Bootstrap Grid grob simuliert damit sollte es gehen gibt bestimmt auch Alternativen..
 
Für den Fall, dass es die doch nicht gefällt. Hier eine Alternative mit CSS3 transform:scale()
HTML: 
<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<style>
#wrapper{
width:848px;
margin:100px auto;
background:#aaa;
}
#menu a {
margin:1px;
float:left;
text-decoration:none;
transition:transform .4s;
}
#menu img {
width:210px;
height:210px;
border:none;
display:block;
}    
#menu a:hover {
position:relative;
transform:scale(1.3,1.2);
box-shadow:2px 2px 6px #000;
z-index:2;
}      
</style>
</head>
<body>
<div id="wrapper">
<div id="menu">
<a href="#" ><img src="bild2.jpg"></a>
<a href="#" ><img src="bild3.jpg"></a>
<a href="#" ><img src="bild2.jpg"></a>
<a href="#" ><img src="bild3.jpg"></a>
<a href="#" ><img src="bild2.jpg"></a>
<a href="#" ><img src="bild3.jpg"></a>
<a href="#" ><img src="bild2.jpg"></a>
<a href="#" ><img src="bild3.jpg"></a>
</div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben