web-dev-qa-db-fra.com

Superposition d'images sur des images sensibles au format bootstrap

J'essaie de créer une grille d'images réactive (avec des descriptions) qui, une fois déplacée, aura une superposition de couleurs (uniquement l'image et pas le texte). En raison de la hauteur sensible des images, j'ai un problème où la superposition couvre tout et pas seulement l'image.

De toute façon, je peux résoudre ce problème?

J'ai recréé le problème ici pour faciliter la compréhension: http://jsfiddle.net/r8rFc/

Voici mon 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!

htmlcssresponsive-designtwitter-bootstrap-3
17
RGilkes

Ajoutez une classe au div qui le contient, puis définissez le css suivant:

.img-overlay {
    position: relative;
    max-width: 500px; //whatever your max-width should be 
}

position: relative est requis sur un élément parent d'enfants avec position: absolute pour que les enfants soient positionnés par rapport à ce parent.

D&EACUTE;MO

32
brouxhaha

Lorsque vous spécifiez position: absolute, il se positionne sur l'élément immédiatement supérieur avec position: relative. Dans ce cas, il s’agit de la division .project. 

Si vous attribuez au div de parent immédiat de l'image un style de position: relative, la superposition y correspond au lieu du div qui inclut 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;
}
3
Michelle

Si je comprends votre question, vous voulez que la superposition se superpose à l’image et ne couvre pas tout?

Je mettrais le DIV parent (je renommé dans le contenu dans le jsfiddle) position relative, car la superposition doit être positionnée par rapport à ce div pas la fenêtre.

.content
{
  position: relative;
}

J'ai fait quelques recherches et mis à jour votre violon pour que la superposition corresponde exactement à celle qui est (je crois) ce que vous voulez, faites-le moi savoir quand même :) http://jsfiddle.net/b9Vyw/

2
ottis

J'ai eu un peu de mal à obtenir que cela fonctionne aussi. Utiliser la réponse de brouxhaha m'a permis d'atteindre 90% du chemin que je recherchais. Mais le réglage du rembourrage ne me permettait pas de placer le texte où je voulais. Utiliser haut et gauche semblait mieux fonctionner à mes fins.

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    top: 80%;
    left: 20%;
}

http://jsfiddle.net/1rz0b7d8/1/

0
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
0
vogonyo