Superposition d'images sur des images de taille réactive bootstrap
j'essaie de créer une grille d'images responsive (avec des descriptions) qui, lorsqu'elle est surmontée, aura une couleur superposée (juste l'image et pas le texte). En raison de la hauteur réactive 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!
5 réponses
ajouter une classe à la div contenant, puis y mettre les css suivants:
.img-overlay {
position: relative;
max-width: 500px; //whatever your max-width should be
}
position: relative est requis sur un élément parent des enfants avec position: absolute pour que les enfants soient positionnés par rapport à ce parent.
lorsque vous spécifiez position: absolute il se positionne à l'élément suivant-le plus haut avec position: relative. Dans ce cas, c'est la .projet div.
si vous donnez à la div parent immédiat de l'image un style de position: relative, la superposition sera la clé à cela au lieu de la 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;
}
Si je comprends bien votre question, vous voulez avoir la superposition sur l'image et pas tout couvrir?
j'ai placé le DIV parent (je renommé dans content in the jsfiddle) en position relative, car la superposition doit être positionnée par rapport à ce div et non par rapport à la fenêtre.
.content
{
position: relative;
}
j'ai fait un peu de pointage et mis à jour votre violon pour avoir juste la superposition dimensionnée à l'img qui (je pense) est ce que vous voulez, faites-le moi savoir de toute façon :) http://jsfiddle.net/b9Vyw/
j'ai eu un peu de mal à obtenir que cela fonctionne ainsi. Utiliser la réponse de brouxhaha m'a permis d'atteindre 90% de ce que je cherchais. Mais l'ajustement du rembourrage ne me permettait pas de mettre le texte où je voulais. L'utilisation de top et gauche a semblé mieux fonctionner pour mes buts.
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
top: 80%;
left: 20%;
}
<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