<h2>Caja flexible con imágenes circulares y diferentes efectos hover </h2>
<div id="equipo">
<div class="caja-circular">
<div class="cont-1">
<img src="https://www.qe2computing.com/wp-content/uploads/2020/11/Sigmund_Freud_by_Max_Halberstadt_cropped_es.wikipedia.org_.Dominio-publico-200px.jpg" alt="Sigmund Freud" />
<div class="capa-superpuesta">
<div class="txt-superpuesto">Sigmund Freud</div>
</div><!-- capa-superpuesta -->
</div><!-- .cont-1 -->
<div class="txt-pie-img">
<h3>Sigmund Freud</h3>
<p>Příbor, 6 de mayo de 1856-Londres, 23 de septiembre de 1939</p>
</div>
</div>
<div class="caja-circular">
<div class="cont-2">
<img id="tesla" src="https://www.qe2computing.com/wp-content/uploads/2020/11/Nikola-Tesla-es.wikipedia.org-dominio-publico-200px.jpg" alt="Nikola Tesla"/>
<div class="capa-superpuesta-2">
<div class="txt-superpuesto">Nikola Tesla</div>
</div><!-- capa-superpuesta -->
</div><!-- .cont-2 -->
<div class="txt-pie-img">
<h3>Nikola Tesla</h3>
<p>Actual Croacia; 10 de julio de 1856-Nueva York, 7 de enero de 1943</p>
</div>
</div>
<div class="caja-circular">
<div class="cont-3">
<img src="https://www.qe2computing.com/wp-content/uploads/2020/11/GodfreyKneller-IsaacNewton-1689-snl.no-dominio-publico-200px.jpg" alt="Isaac Newton" />
</div><!-- .cont-3 -->
<div class="txt-pie-img">
<h3>Isaac Newton</h3>
<p>Woolsthorpe, Lincolnshire; 25 de diciembre de 1642/ 4 de enero de 1643-Kensington, Londres; 20 de marzo/ 31 de marzo de 1727</p>
</div><!-- .txt-pie-img -->
</div><!-- .caja-circular -->
<div class="caja-circular">
<div class="cont-3">
<img src="https://www.qe2computing.com/wp-content/uploads/2020/11/charles-robert-darwin-licencia-pixabay.com-200px.jpg" alt="Charles Robert Darwin" width="190" height="190" />
</div><!-- .cont-3 -->
<div class="txt-pie-img">
<h3>Charles Robert Darwin</h3>
<p>Shrewsbury, 12 de febrero de 1809-Down House, 19 de abril de 1882</p>
</div>
</div>
<div class="caja-circular">
<div class="cont-3">
<img src="https://www.qe2computing.com/wp-content/uploads/2020/11/Albet-Einstein.pxhere.com_CC0-Dominio-publico-200px.jpg" alt="Charles Robert Darwin" width="190" height="190" />
</div><!-- .cont-3 -->
<div class="txt-pie-img">
<h3>Albert Einstein</h3>
<p>Ulm, Imperio alemán; 14 de marzo de 1879-Princeton, Estados Unidos; 18 de abril de 1955</p>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
#equipo {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
/* space-between provocaría que los círculos queden alineados a la derecha en la 2a línea */
justify-content: space-around;
align-items: flex-start;
}
.caja-circular {
padding: 0 7px 20px;
max-width: 230px;
}
.caja-circular img {
box-shadow: 7px 7px 5px #888888;
border-radius: 50%;
margin: 0 auto;
display:block;
/* la altura y anchura de la img están determiandas por la capa .cont- */
width: 100%;
height: auto;
}
.caja-circular div {margin: 0 auto 20px; display: block;}
.txt-pie-img {text-align: center;}
/* Se aplica a todas las que empiezan con cont- */
[class*="cont-"] {
position: relative;
width: 170px;
height: 170px;
}
/* EFECTOS HOVER SOBRE LA IMAGEN */
/* Capa superpuesta con fundico al hacer hover */
/* Necesita posicionamietno relativo para que capa-superpuesta no ocupe todo el ancho*/
.capa-superpuesta {
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.cont-1:hover .capa-superpuesta {
opacity: 1;
}
.txt-superpuesto {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
/* Caja 2: 'tesla'. Efecto hover semitransparente con texto superpuesto */
.capa-superpuesta-2 {
border-radius: 50%;
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
#tesla {
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
}
.cont-2:hover #tesla {
opacity: 0.3;
}
.cont-2:hover .capa-superpuesta-2 {
opacity: 1;
}
.cont-2 .txt-superpuesto {
color: black;
/* Color de fondo y de letra opcional */
background-color: rgba(0, 0, 0, 1);
color: white;
font-size: 16px;
padding: 7px 10px;
}
/* Caja 3: 'Newton'. Efecto hover simple con efecto filter */
.cont-3:hover img {
filter: brightness(70%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.