Efekty CSS: miniaturki obrazków (bez użycia JS)

Potęga CSS jest ogromna. Efekty i animacje, które jeszcze kilka lat temu nie były możliwe do wykonania bez pomocy JavaScriptu, dzisiaj osiągamy bez większego trudu wyłącznie przy użyciu HTML+CSS. Niniejszym wpisem chciałbym rozpocząć serię wpisów o alternatywach dla popularnych JavaScriptowych efektów, które beztrosko i zupełnie niepotrzebnie stosujemy na swoich stronach. Na pierwszy ogień idą miniaturki obrazków.

Zobacz demo

HTML+CSS

Za wszystkie efekty odpowiada wyłącznie CSS, więc podstawowy kod HTML to tylko 2 elementy: odnośnik i obrazek. Dzięki temu nie jest konieczna głębsza ingerencja w źródło strony.

<a href="#" title="Lorem ipsum" class="link">
    <img src="img/01.jpg" alt="" />
</a>

W arkuszu stylów definiujemy bazowy wygląd miniaturek i przygotowujemy pseudoelementy :before i :after wykorzystywane w efektach.

.link {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 1em solid #fff;
    background: #111;
    max-width: 100%;
}
 
.link img {
    display: block;
    transition: all .6s ease-in-out;
    width: 20em;
}
 
.link:before, .link:after {
    content: '';
    height: 100%;
    position: absolute;
    text-align: center;
    transition: all .6s ease-in-out;
    width: 100%;
}

Efekt #1: Fade

Pierwszy efekt jest bardzo prosty. Polega na przesłonięciu obrazka półprzezroczystą warstwą i wyświetleniu na jego środku ikonki odnośnika.

.link.fade-in:before {
    top: 0;
    left: 0;
    background: rgba(24, 188, 156, 0);
}
 
.link.fade-in:hover:before {
    background: rgba(24, 188, 156,.5);
}
 
.link.fade-in:after {
    content: "\f0c1";
    color: #fff;
    font-family: FontAwesome;
    font-size: 2em;
    background: rgba(24, 188, 156,.9);
    top: 50%;
    left: 50%;
    width: 2em;
    height: 2em;
    margin: -1em 0 0 -1em;
    line-height: 2em;
    opacity: 0;
}
 
.link.fade-in:hover:after {
    opacity: 1;
}

Efekt #2: Slide

Drugi efekt polega na wjechaniu warstwy przesłaniającej i ikonki z dowolnej strony obrazka. Dla przykładu przedstawię 3 warianty wjeżdżania: z lewej, z góry oraz z lewego górnego narożnika, a pozostałe możliwości pozostawiam wam do samodzielnego wykonania 🙂

.link.slide:before {
    top: 0;
    left: 0;
    background: rgba(24, 188, 156, .5);
}
 
.link.slide.left:before {
    left: -100%;
}
 
.link.slide.top:before {
    top: -100%;
}
 
.link.slide.top-left:before {
    top: -100%;
    left: -100%;
}
 
.link.slide:hover:before {
    top: 0;
    left: 0;
}
 
.link.slide:after {
    content: "\f0c1";
    color: #fff;
    font-family: FontAwesome;
    font-size: 2em;
    background: rgba(24, 188, 156, .9);
    top: 50%;
    left: 50%;
    width: 2em;
    height: 2em;
    margin: -1em 0 0 -1em;
    line-height: 2em;
}
 
.link.slide.left:after {
    left: -50%;
}
 
.link.slide.top:after {
    top: -50%;
}
 
.link.slide.top-left:after {
    top: -50%;
    left: -50%;
}
 
.link.slide:hover:after {
    left: 50%;
    top: 50%;
}

Elekt #3: Slide+Fade

Połączmy oba poprzednie efekty. Niech przesłona pojawia się zmieniając przezroczystość, a ikonka w wyjeżdża z dowolnej strony obrazka. Tu również przygotujmy 3 warianty.

.link.slide-fade:before {
    top: 0;
    left: 0;
    background: rgba(24, 188, 156,0);
}
 
.link.slide-fade:hover:before {
    background: rgba(24, 188, 156,.5);
}
 
.link.slide-fade:after {
    content: "\f0c1";
    color: #fff;
    font-family: FontAwesome;
    font-size: 2em;
    background: rgba(24, 188, 156,.8);
    top: 50%;
    left: 50%;
    width: 2em;
    height: 2em;
    margin: -1em 0 0 -1em;
    line-height: 2em;
}
 
.link.slide-fade.left:after {
    left: -50%;
}
 
.link.slide-fade.top:after {
    top: -50%;
}
 
.link.slide-fade.top-left:after {
    top: -50%;
    left: -50%;
}
 
.link.slide-fade:hover:after {
    left: 50%;
    top: 50%;
}

Efekt #4: Zoom

Tym razem zajmijmy się wjeżdżaniem sprzed i zza ekranu. Łącząc wszystkie możliwe kombinacje otrzymamy 4 ciekawe efekty.

.link.zoom.out:before, .link.zoom.out-in:before {
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    background: rgba(24, 188, 156,0);
}
 
.link.zoom.out:hover:before, .link.zoom.out-in:hover:before {
    background: rgba(24, 188, 156,.5);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
 
.link.zoom.in:before, .link.zoom.in-out:before {
    top: 0;
    left: 0;
    box-shadow: inset 0 0 0 rgba(24, 188, 156,.5);
}
 
.link.zoom.in:hover:before, .link.zoom.in-out:hover:before {
    box-shadow: inset 0 0 0 10em rgba(24, 188, 156,.5);
}
 
.link.zoom:after {
    content: "\f0c1";
    color: #fff;
    font-family: FontAwesome;
    background: rgba(24, 188, 156,.9);
    top: 50%;
    left: 50%;
    width: 2em;
    height: 2em;
    margin: -1em 0 0 -1em;
    line-height: 2em;
    opacity: 0;
}
 
.link.zoom.out:after {
    font-size: .2em;
}
 
.link.zoom.in:after {
    font-size: 10em;
}
 
.link.zoom.out-in:after {
    font-size: 10em;
}
 
.link.zoom.in-out:after {
    font-size: 100%;
}
 
.link.zoom:hover:after {
    font-size: 2em;
    opacity: 1;
}

Efekt #5: Move

Kolejny efekt nieco bardziej wykorzystuje możliwości CSS3. Używana własność transform nie jest jeszcze w pełni dostępna w niektórych przeglądarkach, więc będziemy posiłkować się prefiksami. Niech ikonka zasłania tylko część obrazka, a on sam niech przesunie się tak, by jego środek wciąż pozostawał widoczny.

.link.move {
    background: rgb(24, 188, 156);
}
 
.link.move:before {
    top: 0;
    left: 0;
    background: rgba(24, 188, 156, .5);
    z-index: 1;
}
 
.link.move:after {
    content: "\f0c1";
    color: #fff;
    font-family: FontAwesome;
    font-size: 2em;
    background: rgba(24, 188, 156,1);
    z-index: 2;
}
 
.link.move.left:before {
    left: -100%;
}
 
.link.move.left:after {
    top: 0;
    left: -50%;
    width: 2em;
    height: 100%;
    line-height: 10em;
}
 
.link.move.left:hover img {
    -webkit-transform: translateX(20%);
    -moz-transform: translateX(20%);
    transform: translateX(20%);
}
 
.link.move.bottom:before {
    top: 100%;
}
 
.link.move.bottom:after {
    bottom: -50%;
    left: 0;
    width: 100%;
    height: 2em;
    line-height: 2em;
}
 
.link.move.bottom:hover img {
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    transform: translateY(-20%);
}
 
.link.move.left-bottom:before {
    top: 100%;
    left: -100%;
}
 
.link.move.left-bottom:after {
    bottom: -50%;
    left: -50%;
    width: 2em;
    height: 2em;
    line-height: 2em;
}
 
.link.move.left-bottom:hover img {
    -webkit-transform: translateX(20%) translateY(-20%);
    -moz-transform: translateX(20%) translateY(-20%);
    transform: translateX(20%) translateY(-20%);
}
 
.link.move:hover:before {
    top: 0;
    left: 0;
}
 
.link.move:hover:after {
    bottom: 0;
    left: 0;
}

Efekt #6: Rotate

Własność transform daje nam również efekt obracania elementów - wykorzystajmy to. Sprawmy, by przesłona z ikonką obracały się przy wjeżdżaniu na obrazek.

.link.rotate:before {
    background: rgba(24, 188, 156, .5);
    top: 0;
    left: 0;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotateZ(-90deg);
    -moz-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
}
 
.link.rotate:after {
    content: "\f0c1";
    color: #fff;
    font-family: FontAwesome;
    font-size: 2em;
    background: rgba(24, 188, 156,.9);
    top: 50%;
    left: 50%;
    width: 2em;
    height: 2em;
    margin: -1em 0 0 -1em;
    line-height: 2em;
    -webkit-transform-origin: -4em -4em;
    -moz-transform-origin: -4em -4em;
    transform-origin: -4em -4em;
    -webkit-transform: rotateZ(-90deg);
    -moz-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
}
 
.link.rotate.left:before, .link.rotate.left:after {
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}
 
.link.rotate:hover:before, .link.rotate:hover:after {
    -webkit-transform: rotateZ(0);
    -moz-transform: rotateZ(0);
    transform: rotateZ(0);
}

Podsumowanie

Jak widzicie tworzenie efektów przy pomocy CSS nie jest takie trudne - moim zdaniem jest dużo łatwiejsze niż w jQuery, zwłaszcza dla początkujących webmastahów 😉