Roylan Suarez Reyes
Roylans.dev - Blog sobre desarrollo web

Follow

Roylans.dev - Blog sobre desarrollo web

Follow
Imagen de backgroud desenfocada en carrousel

Imagen de backgroud desenfocada en carrousel

Roylan Suarez Reyes's photo
Roylan Suarez Reyes
·Nov 11, 2021·

2 min read

Si algunas ves has creado un carrousel de imágenes es posible que se te haya presentado el problema de que las imágenes verticales no ocupal el 100% del espacio y queda un vacío a cada lado de la imagen.

Screenshot_20211111_082934.png

Esto lo puedes solucionar estableciendo un color de backgraound también, pero yo preferí establecer la primera imagen de la galería de forma desenfocada como backgrond del carrousel. Quedando de esta forma:

Screenshot_20211111_083231.png

En este caso estoy utilizando Bootstrap 4 en una plantilla con Django, pero es aplicable a cualquier situación.

<div id="carouselControls" class="carousel slide" data-ride="carousel">
        <div id="carouselExcursion" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="bg-image-default pt-5"></div>
            {% for foto in fotos %} 
            <div class="carousel-item {% if forloop.first %}active{% endif %}">
                <img 
                  src="{% thumbnail foto.foto 1500x300 crop %}" 
                  class="img-center d-block item-carrousel" alt="{{ excursion }}"
                >
            </div>
            {% endfor %}
          </div>
          <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>

Este ejemplo de código es un carrousel de Bootstrap 4 , excepto la linea 4, la cual hace la magia:

<div class="bg-image-default pt-5"></div>

Este elemento div es el encargado de establecer la imagen de background desenfocada a través de la clase bg-image-default

.bg-image-default {
    background-image: url('{% thumbnail excursion.image 310x200 crop %}');
    background-repeat: no-repeat;
    background-size: cover;     
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(16px);
    z-index: -1;
  }

Con esta clase establecemos una imagen de background que ocupe todo el espacio del div, le establecemos posición absolute y le aplicamos el filtro blur() con 16px de granulado de la imagen, este valor lo podemos modificar a nuestro gusto si queremos que la imagen sea más o menos nítida.

¿Porqué es necesario crear un div para la imagen de background? Pues porque si aplicamos el filtro blur() sobre un elemento padre todos los hijos lo heredarán, por tanto las imágenes de carrousel también se desenfocarán.

Espero que este pequeño truco pueda de ser de utilidad si te encuentras en esta situación.

Did you find this article valuable?

Support Roylan Suarez Reyes by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this