Галереи и сетки фотографий для Блоггер. Продолжение
Коды галерей нашла в сети. Некоторые пришлось подстраивать под Блоггер.
Галерея — поляроид
В прошлой статье я писала о другой галерее, тоже интересной внешне.
Галерея с hover-эффектом. При наведении курсором на фото, оно становится цветным и увеличивается
<div class="wrapper">
<div class="item">
<div class="polaroid"><img src="ваша картинка 1">
<div class="caption">Название картинки</div>
</div>
</div>
<div class="item">
<div class="polaroid"><img src="ваша картинка 2">
<div class="caption">Название картинки</div>
</div>
</div>
<div class="item">
<div class="polaroid"><img src="ваша картинка 3">
<div class="caption">Название картинки </div>
</div>
</div>
<div class="item">
<div class="polaroid"><img src="ваша картинка 4">
<div class="caption">Название картинки</div>
</div>
</div>
<div class="item">
<div class="polaroid"><img src="ваша картинка 5">
<div class="caption">Название картинки</div>
</div>
</div>
</div>
<style>
.wrapper {
width: 100%;
padding: 0 2rem;
text-align: center;
}
.polaroid {
background: #FFF;
padding: 1rem;
box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);
}
.polaroid > img{
max-width: 100%;
height: auto;
}
.caption {
font-size: 1.8rem;
text-align: center;
line-height: 2em;
}
.item {
width: 30%;
display: inline-block;
margin-top: 2rem;
filter: grayscale(100%);
}
.item .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transition: all 0.35s;
}
.item:nth-of-type(4n+1) {
transform: scale(0.8, 0.8) rotate(5deg);
transition: all 0.35s;
}
.item:nth-of-type(4n+1) .polaroid:before {
transform: rotate(6deg);
height: 20%;
width: 47%;
bottom: 30px;
right: 12px;
box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
}
.item:nth-of-type(4n+2) {
transform: scale(0.8, 0.8) rotate(-5deg);
transition: all 0.35s;
}
.item:nth-of-type(4n+2) .polaroid:before {
transform: rotate(-6deg);
height: 20%;
width: 47%;
bottom: 30px;
left: 12px;
box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
}
.item:nth-of-type(4n+4) {
transform: scale(0.8, 0.8) rotate(3deg);
transition: all 0.35s;
}
.item:nth-of-type(4n+4) .polaroid:before {
transform: rotate(4deg);
height: 20%;
width: 47%;
bottom: 30px;
right: 12px;
box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3);
}
.item:nth-of-type(4n+3) {
transform: scale(0.8, 0.8) rotate(-3deg);
transition: all 0.35s;
}
.item:nth-of-type(4n+3) .polaroid:before {
transform: rotate(-4deg);
height: 20%;
width: 47%;
bottom: 30px;
left: 12px;
box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3);
}
.item:hover {
filter: none;
transform: scale(1, 1) rotate(0deg) !important;
transition: all 0.35s;
}
.item:hover .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transform: rotate(0deg);
height: 90%;
width: 90%;
bottom: 0%;
right: 5%;
box-shadow: 0 1rem 3rem rgba(0,0,0,0.2);
transition: all 0.35s;
}
Выделенное в коде: красный — вставляем адреса картинок.
синий — пишем название картинок.
оранжевый — меняем цвет рамки картинки при наведении курсора.
зелёный — меняем фильтр (о фильтрах), в данном коде применяется чёрно-белый фильтр.
А ещё бывают фильтры:
blur (размытие) - значение задается в единицах длины, например px, em
brightness (яркость) - в %
contrast (контрастность) - в %
grayscale (чёрно-белое) - в %
saturate (насыщенность цвета) - в %
invert (негатив) - в %
opacity (прозрачность) - в %
sepia - работает только при 100%
hue-rotate (смещение цвета, поворот оттенка) - значение задаётся в deg
Генератор поможет выбрать фильтр и настроить его.
Автор кода галереи - Wanderson
Галерея, с увеличением фото по клику
<div class="gallery">
<a tabindex="1"><img src="фото 1"></a>
<a tabindex="2"><img src="фото 2"></a>
<a tabindex="3"><img src="фото 3"></a>
<a tabindex="4"><img src="фото 4"></a>
<a tabindex="5"><img src="фото 5"></a>
<a tabindex="6"><img src="фото 6"></a>
<a tabindex="7"><img src="фото 7"></a>
<a tabindex="8"><img src="фото 8"></a>
<a tabindex="9"><img src="фото 9"></a>
<a tabindex="10"><img src="фото 10"></a>
<a tabindex="11"><img src="фото 11"></a>
<a tabindex="12"><img src="фото 12"></a>
</div>
<style>
.gallery {
margin: 100px auto 0;
width: 800px;
}
.gallery a {
display: inline-block;
height: 135px;
position: relative;
width: 180px;
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.gallery a img {
border: 8px solid #fff;
border-bottom: 8px solid #fff;
cursor: pointer;
display: block;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}
.gallery a:nth-child(1) img {
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.gallery a:nth-child(2) img {
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.gallery a:nth-child(3) img {
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.gallery a:nth-child(4) img {
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.gallery a:nth-child(5) img {
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.gallery a:nth-child(6) img {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.gallery a:nth-child(7) img {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
.gallery a:nth-child(8) img {
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.gallery a:nth-child(9) img {
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.gallery a:nth-child(10) img {
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.gallery a:nth-child(11) img {
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.gallery a:nth-child(12) img {
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.gallery a:focus img {
cursor: default;
height: 250%;
left: -150px;
top: -100px;
position: absolute;
width: 250%;
z-index: 25;
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
</style>
В код добавляем фото – место отметила красным.
Синим отметила цвет рамок вокруг фото.
Оранжевым – ширину рамок картинки, если внизу (border-bottom) сделать у рамок ширину больше других, то фотографии будут выглядеть поляроидными.
Зелёным – цвет тени у фотографий.
Автор кода - vavik
Галерея, с показом большой картинки
Галерея на 4 картинки, а при наведении курсора на маленькое изображение, снизу появляется большая картинка.
<div class="galeria">
<div class="imagen"></div>
<div class="imagen"></div>
<div class="imagen"></div>
<div class="imagen"></div>
</div>
<style>
.galeria {
position: relative;
width: 90%;
padding-bottom: 60%;
margin: 10px auto;
background-color: #FFF;
box-shadow: 1px 1px 6px #000;
overflow: hidden;
}
.galeria:before {
content: "";
position: absolute;
margin-top: 24%;
width: 100%;
height: 74%;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_w5Ct8yIfrOkwj_NdAYTRh6yDLicvlGFojCcxAk03hkEE7c4_pXsMoyeJrFbVP28ZAMzPUp-E6MvT7CbMD27l_gcXmUbJdWGbNBiYeI2lururRo_ocuqwinpUEVYdtiwVXQszpI7pImA/s663/Foto-dlya-saita-177.jpg);
background-size: cover;
opacity: .3;
}
.imagen {
position: relative;
width: 24%;
padding-bottom: 24%;
background-position: 50% 50%;
background-size: cover;
cursor: pointer;
display: inline-block;
}
.imagen:nth-of-type(1) {
background-image: url(ваше фото 1);
}
.imagen:nth-of-type(2) {
background-image: url(ваше фото 2);
}
.imagen:nth-of-type(3) {
background-image: url(ваше фото 3);
}
.imagen:nth-of-type(4) {
background-image: url(ваше фото 4);
}
.imagen:before {
content: "";
position: absolute;
top: 400%;
width: 415%;
height: 280%;
background-image: inherit;
background-size: cover;
transition: all .8s;
}
.imagen:nth-of-type(1):before {
left: 0;
}
.imagen:nth-of-type(2):before {
left: -102%; /* -100*(nºimag-1)-(nºimag-1)*2 */
}
.imagen:nth-of-type(3):before {
left: -204%; /* -100*(nºimag-1)-(nºimag-1)*2 */
}
.imagen:nth-of-type(4):before {
left: -306%; /* -100*(nºimag-1)-(nºimag-1)*2 */
}
.imagen:hover:before {
top: 100%;
}
</style>
Красным в коде отметила цвет заднего фона галереи и цвет затемнения большой фотографии.
Синим цветом – цвет тени галереи. Зелёным – адрес фото, которое всегда будет внизу (большое)
Розовым – ваши картинки.
Автор кода – Jorge Mg
Комментарии со спамом удаляются.