La superposition d'images sur sensible de la taille des images bootstrap

Je suis en train de créer une grille souple d'images (les légendes) que lorsqu'on passe la souris dessus ont une couleur de superposition (juste l'image et pas le texte). En raison de la réactivité de la hauteur des images, je vais avoir un problème où la superposition couvre tout, et pas seulement l'image.

Toute façon je peux résoudre ce problème?

J'ai recréé la question ici pour faciliter la compréhension: http://jsfiddle.net/r8rFc/

Voici mon code HTML:

<div class="row">

    <div class="col-xs-12 col-sm-6 col-md-3 project">
        <a href="#">
            <div>
                <img src="http://placehold.it/500x500" class="img-responsive"/>
                <div class="fa fa-plus project-overlay"></div>
            </div>
            <div style="text-align:center;">
                <h3>Project name</h3>
                <p>Image description</p>
            </div>
        </a>
    </div>

</div>

Et mon CSS:

.project-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41,128,185,0.9);
    color: #fff;
    padding: 50%;
}

Merci d'avance!

OriginalL'auteur RGilkes | 2014-01-21

31

Ajouter une classe à la div contenant, puis définissez le code css suivant:
```
.img-overlay {
    position: relative;
    max-width: 500px; //whatever your max-width should be 
}
```
position: relative est nécessaire sur un élément parent des enfants avec position: absolute pour les enfants à être positionné par rapport à ce parent.

DÉMO

A parfaitement fonctionné! Merci!!
Pas de problème. Remarque le max-width est requis dans des dimensions, où les images ne sont pas à côté les uns des autres. Sans un ensemble de largeur (ou max-width) ou 100% images, la superposition s'étend à l'extérieur de l'image, parce que les divs par défaut s'étendre à la taille de leurs parents. Vous pouvez le voir par le redimensionnement de la tripoter domaine de résultat et de retirer le max-width.
Magnifique... merci
Ne fonctionne pas dans Firefox 34.
La superposition de texte ne semble pas être centré.

OriginalL'auteur brouxhaha
3

Lorsque vous spécifiez la position:absolue, elle se positionne au rang suivant de l'élément avec position:relative. Dans ce cas, c'est la .projet div.

Si vous donnez l'image du parent immédiat div style position:relative, la superposition va clé pour que la place de la div qui contient le texte. Par exemple: http://jsfiddle.net/7gYUU/1/
```
 <div class="parent">
    <img src="http://placehold.it/500x500" class="img-responsive"/>
    <div class="fa fa-plus project-overlay"></div>
 </div>

.parent {
   position: relative;
}
```
Œuvres! Je ne peux pas faire deux réponses, mais je upvoted! Merci pour votre aide!!

OriginalL'auteur Michelle
2

Si je comprends bien votre question, vous voulez avoir la superposition sur l'image et pas tout couvrir?

J'avais mis le DIV parent (je l'ai renommé en contenu dans le jsfiddle) position relative, que l'extension doit être positionné par rapport à cette div pas de la fenêtre.
```
.content
{
  position: relative;
}
```
J'ai fait quelques pocking autour et mis à jour vos violons d'avoir de la superposition de la taille de l'img qui (je crois), est ce que vous voulez, laissez-moi savoir tout de même 🙂 http://jsfiddle.net/b9Vyw/

OriginalL'auteur ottis
0

J'ai eu un peu de mal à obtenir que cela fonctionne ainsi. À l'aide de brouxhaha réponse m'a fait 90% du chemin à ce que je cherchais. Mais le rembourrage régler ne serait pas me permettre de mettre le texte n'importe où je voulais. À l'aide de haut et de gauche, semblait mieux à mes besoins.
```
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    top: 80%;
    left: 20%;
}
```
http://jsfiddle.net/1rz0b7d8/1/

OriginalL'auteur radix07

<div class="col-md-4 py-3 pic-card">
          <div class="card ">
          <div class="pic-overlay"></div>
          <img class="img-fluid " src="images/Site Images/Health & Fitness-01.png" alt="">
          <div class="centeredcard">
            <h3>
              <span class="card-headings">HEALTH & FITNESS</span>
            </h3>
            <div class="content-inner mt-5">
              <p class="lead  p-overlay">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsam nemo quasi quo quae voluptate.</p>
            </div>
          </div>
          </div>
        </div>


.pic-card{
     position: relative;

 }
 .pic-overlay{

    top: 0;
    left: 0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: background-color 0.5s ease;

 }
 .content-inner{
    position: relative;
     display: none;
 }

 .pic-card:hover{
     .pic-overlay{
        background-color: $dark-overlay;

     }

     .content-inner{
         display: block;
         cursor: pointer;
     }

     .card-headings{
        font-size: 15px;
        padding: 0;
     }

     .card-headings::after{
        content: '';
        width: 80%;
        border-bottom: solid 2px  rgb(52, 178, 179);
        position: absolute;
        left: 5%;
        top: 25%;
        z-index: 1;
     }
     .p-overlay{
         font-size: 15px;
     }
 }



enter code here

OriginalL'auteur vogonyo

Vous devez vous connecter pour publier un commentaire.