[CSS] Crear capa superpuesta usando varios elementos

Tiempo de lectura estimado: 2 minutos

Hola!.

Hoy vamos a crear una capa superpuesta en una imagen donde podremos poner nuestros iconos de redes sociales de una manera elegante y visualmente atractiva.

¡Vamos a ello!.

He usado font-awesome y Bootstrap. Pero como todo, podéis usar lo que mejor os convenga.

El CSS tiene muchas clases, pero si nos vamos fijando, vemos como se forma el esqueleto de la capa y se fusiona con nuestra imagen base.

.centrado{
  margin:40px 0;
  text-align:center;
}

.img-circle{
    border-radius: 50%;
}
.base-wrap {
  padding: 0 20px;
}
.base-wrap .base {
  position: relative;
  margin: 0 auto;
  width: 160px;
  overflow: hidden;
}
.base-wrap .imagen {
  width: 150px;
  height: 150px;
}
 
.base-wrap .infoIcon a {
  display: inline-block;
  color: #fff;
  opacity: 1;
  margin-top: 0;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}
.base-wrap .infoIcon a:hover,.infoIcon a:focus {
  color: #2baab1;
}
.base-wrap .imgWrap {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

.base-wrap .imgWrap:hover .infoIcon {
  opacity: 1;
  transition: opacity 0.4s ease;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
}

.base-wrap .imgWrap:hover .perfil {
  opacity: 1;
  transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -ms-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
}

.base-wrap .perfil {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background: rgba(0,0,0, 0.7);
  transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -ms-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.base-wrap .infoIcon {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.4s ease;
    -webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -ms-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
}

 .imgWrap:hover .infoIcon a {
  margin-top: 70px;
  opacity: 1;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}

.iconosbase{
margin-right:5px;
font-size:12pt;
}

No os preocupéis. El código es muy sencillo y como siempre, podéis personalizarlo a vuestras necesidades.

Vamos a montar el HTML y a ver el resultado final.

<div class="row centrado">
                <div class="col-md-4 col-sm-4 wow text-center">
                                <div class="base-wrap">
                                    <div class="base">
                                        <div class="imgWrap">
                                            <img src="imagenes/blogPortada.jpg" alt="Vikerweb" class="img-circle imagen">
                                            <div class="perfil"></div>	

                                                <div class="infoIcon">
                                                    <a href="#" class="inline-block iconosbase" title="Instagram"><i class="fa fa-instagram"></i></a>
                                                    <a href="#" class="inline-block iconosbase"><i class="fa fa-facebook" title="Facebook"></i></a>
                                                    <a href="#" class="inline-block iconosbase" title="Twitter"><i class="fa fa-twitter"></i></a>
                                        </div>
                                    </div>
                                </div>
                                     <p><strong>SERNA STUDIO</strong> | <small>DISEÑO Y DESARROLLO WEB PARA TODOS</small>  
                                      </p>  
                                    
                 </div>
</div>

Muy sencillo, verdad?. Vamos montando los elementos de menos a más.

Y por último, aquí el resultado: