web-dev-qa-db-fra.com

Centrer une icône Font Awesome sur l'image en survol

J'essaie de centrer une icône géniale de police sur une image lorsque la souris survole l'image. Voici mon HTML:

<div class="profile-img-container">
    <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
    <i class="fa fa-upload fa-5x"></i>
</div>

Et mon CSS:

.profile-img-container {
    position: relative;
}

.profile-img-container img:hover {
    opacity: 0.5;
}

.profile-img-container img:hover + i {
    display: block;
    z-index: 500;
}

.profile-img-container i {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

Cependant, l'icône impressionnante de la police est affichée à gauche et l'icône clignote toujours lorsque je survole l'image. Voici mon JSFiddle: http://jsfiddle.net/fns8byfj/1/

htmlcsstwitter-bootstrapfont-awesome
13
Rune

L'utilisation ici est importante à considérer. Ceci est un déclencheur, donc j'utiliserais un lien à l'intérieur ici. Je ne voudrais pas afficher: aucun puisque IOS ne fonctionnera pas sur les actions à l'intérieur de ceci lorsque l'état sur le sélecteur était display: none ou visibilité: caché même si le: hover change cet état. Utilisez l'opacité et position pour le "cacher".

TRÈS IMPORTANT:

Un parent n'est pas de la taille de l'image enfant à l'intérieur, à moins que ce div ne soit l'enfant de quelque chose qui limite sa largeur ou que le div soit flottant ou en ligne. Si vous placez cela dans une colonne à l'intérieur de la grille et que l'image est, quelle que soit la largeur de la fenêtre, aussi large que cette colonne, vous pouvez supprimer le "bloc en ligne" du conteneur .profile-img si vous l'utilisez simplement autonome, vous devez le faire flotter ou mettre un bloc .inline dessus, mais vous devez ensuite modifier la réactivité de l'image si le parent est une largeur maximale de bloc en ligne: 100% ne fonctionne pas (tout comme il ne le fait pas ne fonctionne pas si à l'intérieur d'une cellule de table).

: survoler n'est pas une bonne idée, j'utiliserais jQuery pour en faire un clic en basculant la classe du parent.

DÉMO: http://jsfiddle.net/prtkqb44/

CSS: 

.profile-img-container {
    position: relative;
    display: inline-block; /* added */
    overflow: hidden; /* added */
}

.profile-img-container img {width:100%;} /* remove if using in grid system */

.profile-img-container img:hover {
    opacity: 0.5
}
.profile-img-container:hover a {
    opacity: 1; /* added */
    top: 0; /* added */
    z-index: 500;
}
/* added */
.profile-img-container:hover a span {
    top: 50%;
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}
/* added */
.profile-img-container a {
    display: block;
    position: absolute;
    top: -100%;
    opacity: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    color: inherit;
}

HTML: 

<div class="profile-img-container">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
    <a href="#"><span class="fa fa-upload fa-5x"></span></a>
</div>
20
Christina

Vous pouvez le centrer horizontalement et verticalement en utilisant des largeurs en pourcentage, mais cela implique que vous connaissez approximativement la largeur en pourcentages de l'élément que vous essayez de positionner, dans ce cas, la police impressionnante. Notez que je l'ai aligné approximativement, en le positionnant à gauche et en haut de 45%.

J'ai mis à jour votre code avec la partie mentionnée ci-dessus, et en appliquant également l'effet de survol sur le DIV contenant de sorte que l'icône de police génial ne scintille pas. Il scintillait parce que lorsque vous planiez dessus, le survol de l'image se perdait.

Le HTML reste le même, seul le style diffère:

.profile-img-container {
    position: relative;
}

.profile-img-container i {
    position: absolute;
    top: 45%;  
    left: 45%;
    transform: translate(-45%, -45%);
    display: none;
}

.profile-img-container:hover img {
    opacity: 0.5;    
}

.profile-img-container:hover i {
    display: block;
    z-index: 500;
}

Votre mise à jour JSFiddle.

5
Raul Rene

Voici une version fixe de la solution @ Christina : http://jsfiddle.net/prtkqb44/354/

J'ai supprimé celui-ci qui ne fonctionnait pas correctement

.profile-img-container img:hover {
    opacity: 0.5
}

et ajouté dans . profile-img-container 

background: rgba(255, 255, 255, .5);
2
Alberto T

La solution suivante devrait fonctionner, tant que vous pouvez vous permettre d'avoir des largeurs fixes dans le conteneur le plus haut (dans l'exemple, 300 px) ou que vous parvenez à avoir un line-height valeur qui est toujours égale à la hauteur de rendu de l'image.

La solution exploite le line-height et text-align propriétés pour atteindre le positionnement vertical et horizontal, respectivement.

<div class="profile-img-container">
    <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
    <div class="profile-img-i-container">
        <i class="fa fa-upload fa-5x"></i>
    </div>
</div>

.profile-img-container {
    height: 300px;
    width: 300px;
    line-height: 300px;
    position:relative;
}

.profile-img-container:hover img {
    opacity: 0.5;
}

.profile-img-container:not(:hover) .profile-img-i-container {
    display: none;
}

.profile-img-i-container {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    height: 100%;
    width: 100%;
    z-index: 500;
    text-align:center;
}

.profile-img-i-container i {
    display:block;
    line-height: inherit;
}

Violon

À propos du scintillement:

Attention à :hover. Dans votre exemple, vous aviez l'extrait de code suivant:

.profile-img-container img:hover + i {
    display: block;
    ...
}

Cela provoque l'élément i à apparaître lorsque vous survolez l'image. Ensuite, l'élément i est placé au-dessus de l'image, vous n'êtes donc plus en train de survoler l'image, mais l'élément i. L'icône se masque à nouveau et vous placez à nouveau le survol de l'image. C'est ce qui a provoqué l'effet de scintillement. La solution est de travailler avec le :hover propriété de l'élément le plus haut.

.profile-img-container:hover img + i {
    display: block;
    ...
}
1
abl

J'ai changé la position de .profile-img-container en absolu et défini sa largeur à 50% (vous pouvez ajuster la largeur pour changer la taille de l'image).

.profile-img-container {
position: absolute;
width:50%;
}

en raison de l'effet de scintillement, vous devez définir votre img z-index plus haut que le z-index de i.

.profile-img-container img:hover {
opacity: 0.5;
z-index: 501;
}

.profile-img-container img:hover + i {
display: block;
z-index: 500;
}

J'ai changé la position de i en absolu et je l'ai centrée en utilisant margin-left et margin-top

.profile-img-container i {
display: none;
position: absolute;
margin-left:43%;
margin-top:40%;
}

Et finalement j'ai changé la position de img en absolu

.profile-img-container img {
position:absolute;
}

Essayez ce code: http://jsfiddle.net/fns8byfj/16/

0
null