Comment placer une superposition de la div sur une autre div sur le vol stationnaire avec grille design?

J'ai essayé de faire une grille comme la conception, je veux montrer une superposition sur le vol stationnaire pour chaque div.

La superposition de la div a deux boutons qui devraient être placés dans le centre.

j'ai essayé le code ci-dessous je crois que la logique est correcte, mais la position du bouton et de superposition ne sont pas à placer au centre de l'image div.

Image Sans superposition

Comment placer une superposition de la div sur une autre div sur le vol stationnaire avec grille design?

Sur le vol stationnaire avec superposition

Comment placer une superposition de la div sur une autre div sur le vol stationnaire avec grille design?

Html

<ul>
    <li>
        <div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
        <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>
    <li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
         <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>
    <li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
         <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>
    <li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
        <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>

</ul>

CSS

.image{
 width:100px;
 height:100px;

}
.overlay{
 width:100px;
 height:100px;
 display:none; 
}

ul { list-style: none; width: 100%; }
ul li { display:inline-block; width:150px;}
.image:hover +.overlay {
    display:block;
    background-color:black;
    top:0;
    opacity:0.75;

}
.bt1 {
    background-color:orange;
    position:absolute;
    width:50px;
    height:50px;
    margin:0 0 0 5%;
}
.bt2 {
    background-color:green;
    position:absolute;
    width:50px;
    height:50px;
    margin:0 5% 0 0;
}

JSfiddle . La taille de l'Image sont modifiables fixé de rembourrage pour bouton central peut ne pas vous aider ici je pense. Quelqu'un peut m'aider sur le positionnement de la superposition?

OriginalL'auteur sun | 2013-11-16

css css3 html javascript jquery

7

Changé quelques choses avec les positions et a également donné une hauteur de l'élément li cause de l'img a été plus grand..

http://jsfiddle.net/4CqNK/8/
```
.image{
 width:100px;
 height:100px;

}
.overlay{
 width:100%;
 height:100%;
display:none;
    position:absolute;
    top:0px;
    left:0px;
}
.overlay div {
    position:relative;
    display:inline-block;
    top:50%;
    margin:-50% 5px 0 0;
}
ul { list-style: none; width: 100%; }
ul li { position:relative;display:inline-block; width:150px;height:150px;}
li:hover .overlay {
    display:block;
    background-color:black;
    opacity:0.75;
}
.bt1 {
    background-color:orange;
    width:50px;
    height:50px;
}
.bt2 {
    background-color:green;
    width:50px;
    height:50px;
}
```
Qu'est-ce que .overlay div ici. j'ai essayé de valeur supérieure à bouton avec flotteur sa ne fonctionne pas.peut-il être centré?
li hover est bonne, de sorte qu'il ne clignote pas.Merci @caramba
est-ce possible d'ajouter des boutons dans la 2e rangée dans le centre?Pouvez-vous nous donner aucune idée de @caramba
bien sûr, il peut être centré, ces boutons toujours la même taille? pourquoi est .image dans votre css height:100px; si la hauteur de l'image est 150px? voulez-vous être 100px et couper le reste?
petite mise à jour mais pas de dynamique des largeurs possibles comme ceci: jsfiddle.net/4CqNK/12

OriginalL'auteur caramba
4

Voici une autre solution où je l'ai utilisé seulement 1 div mais vous pouvez utiliser plusieurs autres div's avec la même classe. VIOLON

Merci +1. Désolé, je ne veux pas que l'image d'arrière-plan

OriginalL'auteur Unknown User
1

Vous devez d'abord assurez-vous que votre .image et .overlay classes sont affichés au même endroit. Donc, ici, vous devez ajouter un position:relative dans ul li et ajouter un absolute:position les deux classes.

Une fois que vous avez, il est plus facile de placer vos éléments: (jsfiddle)
```
.image{
    position:absolute;
    left:0;
    top:0;
 width:150px;
 height:150px;

}
.overlay{
    position:absolute;
    left:0;
    top:0;
 width:150px;
 height:150px;
 display:none; 
}

ul { list-style: none; width: 100%; }
ul li { 
    display:inline-block; 
    width:160px; 
    position:relative;
}
li:hover .overlay {
    display:block;
    background-color:black;
    opacity:0.75;

}
.bt1 {
    background-color:orange;
    position:absolute;
    width:50px;
    height:50px;
    left:5%; <-- you may have to play with those values if you want to place them somewhere else
    top:30%; <--  same as above
}
.bt2 {
    background-color:green;
    position:absolute;
    width:50px;
    height:50px;
    right:5%;
    top:30%;
}
```
Merci pour votre réponse +1, ce qui donne parent à relative et de l'enfant à absolute est sympa, mais je peux savoir pourquoi c'est à clignoter sur le vol stationnaire?
Le problème est que lorsque vous ajoutez l'élément de superposition, vous n'êtes pas survolant l'image plus depuis que vous êtes en vol stationnaire de la superposition. Donc, il ne cesse de jongler entre "planant" et ne pas "planant"
Souligné correctement Peut être un autre moyen d'afficher la superposition sur le vol stationnaire aidera comme caramba proposé. Nous devrions essayer avec li hover.@leMoisela
exactement, .image:hover doit être modifié pour li:hover, comme Caramba correctement proposé !
Ya mais ont encore un doute comme planant sur li .overlay va venir alors suis planant sur .overlay maintenant comment il pense que je planant sur li

OriginalL'auteur leMoisela
0

Vous pouvez utiliser le code CSS ci-dessous pour les images:
```
position:absolute;
z-index:-1;
```
La propriété z-index spécifie l'ordre de la pile d'un élément.

Un élément avec le plus grand ordre de la pile est toujours en face d'un élément avec une baisse de la pile de la commande.

Remarque: z-index ne fonctionne que sur les éléments en position (position:absolute, position:relative, ou position:fixed).

Ma solution: http://jsfiddle.net/xAkJG/1/

OriginalL'auteur bnson

0

Suis tombé sur cette Question et de créer mon propre, flexbox en fonction, solution. Il centre les boutons plus joliment!

http://cssdeck.com/labs/83bhrs3v

<ul>
    <li>
        <div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
        <div class="overlay"><div><div class="bt1"></div><div class="bt2"></div></div></div>
    </li>
    <li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
                <div class="overlay"><div><div class="bt1"></div><div class="bt2"></div></div></div>

    </li>
     <li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
                <div class="overlay"><div><div class="bt1"></div></div></div>

    </li>       
</ul>

.image{
    width:100px;
    height:100px;
}

.overlay{
    width:100%;
    height:100%;
    display:none;
    position:absolute;
    top:0px;
    left:0px;

    background-color:black;
    opacity:0.75;    
}

.overlay > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
}

ul { list-style: none; width: 100%; }
ul li { position:relative;display:inline-block; width:150px;height:150px;}

li:hover .overlay {
    display:block;
}

.bt1 {
    background-color:orange;
    width:80px;
    height:80px;
}
.bt2 {
    background-color:green;
    width:50px;
    height:50px;
}

OriginalL'auteur Mike Mitterer

Vous devez vous connecter pour publier un commentaire.