Gallery Element 1

Gallery Element 1

Рарзметка HTML:

Стили CSS:

.gallery_image_item{
    font-size:0;
    margin-bottom: 20px;
}
.gallery_image_item a {
    display: inline-block;
    position: relative;
    height: 164px;
    width: 100%;
    overflow: visible;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50%;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.33);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.33);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.33);
}
.gallery_image_item img {
    display:none;
}
.gallery_image_item a:before {
    content:"";
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAYCAYAAABjswTDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0MzRjQ2RDlBMkFFMTFFNjg1NDM4MTRDMTZCMUQwRjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0MzRjQ2REFBMkFFMTFFNjg1NDM4MTRDMTZCMUQwRjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQzNGNDZEN0EyQUUxMUU2ODU0MzgxNEMxNkIxRDBGNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQzNGNDZEOEEyQUUxMUU2ODU0MzgxNEMxNkIxRDBGNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnKEM0YAAAKbSURBVHjarNfLS1VBHMDxbiQ9tDRLKEozKIsehGRGBUokrQoMIjLMVQsXRoEQEdImDBe1aBFJQUH0B0SLICixNxeMkELDygTB6JJRZpL0uH0nfhcOpztnfnM6P/gs9M5vZs6Z50lls9kZ/xGLUYdarEUlyjAH0xjHKIbwHPcxErs109kY6nEDY1m/mMAdtGC+b7u+ndyFu9lk4i2OYp62/ZRyGpSjE4cjynyRYR7EVxSiCvUyXWzRj9O4lcQ0aMKoY2g7UGHJX4LjyDje9GUsjDsN5uKio4EBbFIO42qkHfW9wBbfzq7AA0fF71BpyV+Agjz/L0O/YhEe1HZ2q3QkKn5jdyivFJ14hscosTzIZkwrFmC7q7N78VlR0e08I/Ey8Pslx5S4ptwxztg626J8YhP7AnlmuHtCv59zdHa7jI4musKdbcUvZfI3lAcarrPM56iVXaLYHf55wybxhOdmPhY6fdos5XqxQxZVNbaFRmPAs92OmbJ5e53Qob9TlnLmMHgk94I+NEbUoYn1uSc96fGEk1gWeEs7lXn7AznF+ODR5nUzGsF51O6RvCeQNxtPHOWHpIO5nFqPNdKNVL6tS7vQbobyqjBsKWveYE2ofLfvTmA7FA7hu6OSn7ILBPPM1LiAN/iEEVzBqlC5DZhSHDrHtMdtg2JOvcJSy53C7ACFlmPYdT/4iEbfi8w6OTqjog9rlBeZ5bjnqC8tbz7W5btYhjIqMnIFXBRxqTki08IWZp2cR1ESl+8D6MLKiDLv8VD21AnZv6vlG60iIi+NU+hJ8hvMzMOzGE/os2ZQdp9ZSX/WBMO8pSY0/z1V7CdYvpjCU1yVz5hJn4bjdDYXBdiIBtTIZ3gpiuS3HzIdMngtU6QXw3Eb/CPAAP5/0unWIN8GAAAAAElFTkSuQmCC');
    position: absolute;
    width: 43px;
    height: 24px;
    margin-top:-12px;
    margin-left: -21.5px;
    top:50%;
    left:50%;
    z-index: 10;
    display: none;
}
.gallery_image_item a:after {
    content:"";
    background: -moz-linear-gradient(top, rgba(68,51,82,0) 0%, rgba(68,51,82,0.46) 100%);
    background: -webkit-linear-gradient(top, rgba(68,51,82,0) 0%,rgba(68,51,82,0.46) 100%);
    background: linear-gradient(to bottom, rgba(68,51,82,0) 0%,rgba(68,51,82,0.46) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00443352', endColorstr='#c7443352',GradientType=0 );
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 5;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.gallery_image_item a:hover:before{
    display: block;
}
.gallery_image_item a:hover:after{
    opacity: 1;
}
Способ поблагодарить автора сайта:

Комментарии (0)

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором