html - que - seo imagenes wordpress

Imagen superpuesta en imágenes de tamaño sensible.

Question

Estoy tratando de crear una cuadrícula de imágenes (con descripciones) receptiva que cuando se pase el mouse tendrá una superposición de color (solo la imagen y no el texto). Debido a las alturas de respuesta de las imágenes, tengo un problema donde la superposición cubre todo y no solo la imagen.

¿De alguna manera puedo arreglar esto?

He recreado el problema aquí para facilitar su comprensión: http://jsfiddle.net/r8rFc/

Aquí está mi 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>

Y mi CSS:

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

¡Gracias por adelantado!

Answer 1

Agregue una clase al div que lo contiene, luego configure el siguiente css:

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

position: relative se requiere en un elemento padre de hijos con position: absolute para que los hijos se posicionen en relación con ese padre.

DEMO

Answer 2

Cuando especifica position: absolute, se posiciona al siguiente elemento más alto con position: relative. En este caso, esa es la div .project.

Si le asigna a la división principal inmediata de la imagen un estilo de posición: relativo, la superposición será clave para eso en lugar de la división que incluye el texto. Por ejemplo: 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;
}

Answer 3

Si entiendo tu pregunta, ¿quieres tener la superposición justo sobre la imagen y no cubrir todo?

Establecí la posición del DIV principal (me renombré en el contenido en el archivo jsfiddle) en relativa, ya que la superposición debería ubicarse en relación con este div no en la ventana.

.content
{
position: relative;
}

Hice algunos ejercicios y actualicé tu violín para tener el tamaño de la superposición al img que (creo) es lo que quieres, házmelo saber de todos modos :) http://jsfiddle.net/b9Vyw/

Answer 4

Tuve un poco de problemas para que esto también funcionara. El uso de la respuesta de brouxhaha me permitió obtener el 90% de lo que estaba buscando. Pero el ajuste de relleno no me permitiría poner el texto donde quisiera. Usar la parte superior e izquierda parecía funcionar mejor para mis propósitos.

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

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

Answer 5

<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