[Résolu] Mouseover sur Div et décalage d'autre div

Bonjour,

Je me permets de poster ce message car je galère un peu sur un problème de MouseOver.

J'ai plusieurs div (12 dans mon exemple) qui ont les même propriétés.

Lorsque je fais un mouseover sur une des div, celle-ci s'agrandi en hauteur. Je cherche à faire en sorte que seule les cellules qui se trouvent en dessous se décale vers le bas, mais que les cellules de part et d'autre restent à leur position.

J'aurais bien créer des colonnes pour placer mes div (ce qui aurait réglé mon problème), mais j'utilise bootstrap donc selon la taille de l’écran, j'ai 4 colonnes, puis 3, puis 2 puis 1.

Voici mon code : http://jsfiddle.net/ARNcs/, et voici un exemple de l'effet que j'aimerai réaliser : Fiverr.

Quelqu'un aurait'il une suggestion pour m'aider à m'en sortir ?

D'avance Merci

salut,
une solution simple serait d'ajouter un <div> enfant des <div> à agrandir pour le faire apparaître au survol de ce dernier. Tu pourrais ensuite jouer avec les sélecteurs d'adjacence, les positions relatives et les medias quieries pour arriver à ce que tu veux.
Un exemple ici.

PS: j'ai utilisé les contenus générés mais ce n'est pas approprié, c'est juste pour l'exemple (ça remplace le <div> enfant qui devrait être crée).

Merci beaucoup pour ton aide, ça me donne des bonnes pistes

Bonne journée et bonne années