<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%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.