Afficher div sur l’image en survol

Regarde mon jsfiddle

Voici l’exemple de code js:

$(".box").hover(function () { $(this).find('.box-hover').fadeIn(100); $(".box-tresc").show(); }, function () { $(this).find('.box-hover').fadeOut(100); $(".box-tresc").hide(); });

Je veux que la box-tresc div avec le contenu “xxxxx” soit box-tresc au centre de l’image. J’ai essayé margin-top:-30px; mais ça n’a pas marché.

MISE À JOUR :

Voici un violon contenant une solution possible (CSS pur): lien

CSS:

 .box-hover { background-color: rgba(0, 0, 0, 0.6); position: absolute; width: 290px; height: 185px; margin: 5px 5px 0 5px; opacity: 0; color:transparent; -webkit-transition: 0.4s; transition: 0.4s; line-height:185px; text-align:center; } .box-hover:hover { color:white; opacity:1; }

HTML:

  some text
   
 Theme 2.0 
Created by: User

Ceci est un exemple sans déplacer le texte ” Thème 2.0 ” lors du survol.

Vous devriez utiliser display:absolute; comme je l’ai fait ici dans votre code.
Et que vous pouvez utiliser la margin .
J’ai utilisé la margin:-110px 0 0 50px; (Changez-le comme vous voulez)

 .box-tresc { display:none; position:absolute; margin:-110px 0 0 50px; color:white; /* only to make te text more visable */ }

DEMO

Vous pouvez utiliser position:absolute avec% position afin de changer d’image librement. Simplement régler:

 .box-tresc { display: none; position: absolute; text-align: center; top: 50%; width: 100%; } .box-image { margin: 5px 5px 0; position: relative; }

La solution la plus simple consiste simplement à append du text-algin et de la margin-top dans votre classe .box-tresc . Problème résolu.

 .box-tresc { display:none; text-align: center; margin-top:-100px; }

Changez votre code CSS comme ci-dessous et essayez maintenant

 .box { width: 300px; min-height: 200px; position:relative; background-color: #ECECEC; border: 1px solid #C6C6C6; border-radius: 3px; text-align: left; } .box-tresc { display:none; position: absolute; top: 50%; text-align: center; width: 100%; float: left; }

J’espère que cela t’aides..

Essayez quelque chose comme tt?

 $(".box-tresc").css({"right":"20%","display":"block"});

position relative est votre ami ici.

VOIR LA DÉMO