Galeria WordPress

gallery-wordpress.css

// Galeria WordPress
.gallery { margin: 0 auto 18px; }
.gallery .gallery-item {
    float: left;
    margin-top: 0;
    text-align: center;
    width: 33%;
    margin-bottom: 25px;

    img {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: url(grayscale.svg); /* Firefox 4+ */
        filter: gray; /* IE 6-9 */
        @include transition(all .3s ease);

        &:hover {
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            -ms-filter: grayscale(0%);
            -o-filter: grayscale(0%);
            filter: grayscale(0%);
            filter: none; /* Firefox 4+ */
            filter: none; /* IE 6-9 */
        }
    }
}
.gallery-columns-2 .gallery-item { width: 50%; }
.gallery-columns-4 .gallery-item { width: 25%; }
.gallery-columns-5 .gallery-item { width: 20%; }
.gallery-columns-6 .gallery-item { width: 16%; }
.gallery-columns-7 .gallery-item { width: 14%; margin-bottom: 17px; }
.gallery-columns-7 .gallery-item img { width: 120px; height: 120px; }
.gallery-columns-8 .gallery-item { width: 12%; margin-bottom: 7px; }
.gallery-columns-8 .gallery-item img { width: 110px; height: 110px; }
.gallery-columns-9 .gallery-item { width: 11%; margin-bottom: 10px; }
.gallery-columns-9 .gallery-item img { width: 100px; height: 100px; }

.gallery img {
    box-shadow: 0px 0px 4px #999;
    // border: 1px solid white;
    // padding: 8px;
    background: #f2f2f2;
}
.gallery img:hover {
    background: white;
}
.gallery-columns-2 .attachment-medium {
    max-width: 92%;
    height: auto;
}
.gallery-columns-4 .attachment-thumbnail {
    max-width: 84%;
    height: auto;
}
.gallery .gallery-caption {
    color: #888;
    font-size: 12px;
    margin: 0 0 12px;
}
.gallery dl, .gallery dt { margin: 0; }
.gallery br+br { display: none; }