Можно ли сделать галерею сетки, добавляя ссылки на любое изображение?CSS

Разбираемся в CSS
Anonymous
Можно ли сделать галерею сетки, добавляя ссылки на любое изображение?

Сообщение Anonymous »

Я пытаюсь добавить ссылки на 4 изображения из галереи сетки, но это беспорядок. Я начинаю подозревать, что это несовместимо. Я даже пытаюсь сделать переход ..... < /p>
Вы можете игнорировать переход, но если вы тоже можете помочь мне в этом, это еще лучше. < /P>

Код: Выделить всё

 HTML

[url=../product-detail-page/index.html][/url]

[url=../product-detail-page/index.html][/url]

[url=../product-detail-page/index.html][/url]

[url=../product-detail-page/index.html][/url]



CSS

.item1_img_ly{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
height: 100px;
width: 1px;
border-top-left-radius: 3%;
}

.imagen1_ly{
display: block;
height: 125px;
width: 125px;
background-image: url("../photos/palitos_barro.jpg");
background-size: 100%;
}

.imagen1_ly:hover .item1_img_ly{
transition-duration: 1.5s;
height: 125px;
width: 125px;
}

.item2_img_ly{
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
height: 100px;
width: 100px;
border-top-right-radius: 3%;
}

.imagen2_ly{
display: block;
height: 125px;
width: 125px;
background-image: url("../photos/mini_maceta_barro.jpg");
background-size: 100%;
}

.imagen2_ly:hover .item2_img_ly{
transition-duration: 1.5s;
height: 125px;
width: 125px;
}

.item3_img_ly{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
height: 100px;
width: 100px;
border-bottom-left-radius: 3%;
}

.imagen3_ly{
display: block;
height: 125px;
width: 125px;
background-image: url("../photos/setita_ceramica.jpg");
background-size: 100%;
}

.imagen3_ly:hover .item3_img_ly{
transition-duration: 1.5s;
height: 125px;
width: 125px;
}

.item4_img_ly{
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
height: 100px;
width: 100px;
border-bottom-right-radius: 3%;
}

.imagen4_ly{
display: block;
height: 125px;
width: 125px;
background-image: url("../photos/conjunto_barrito.jpg");
background-size: 100%;
}

.imagen4_ly:hover .item4_img_ly{
transition-duration: 1.5s;
height: 125px;
width: 125px;

}
Цель состоит в том, что каждое изображение делает квадрат в центре, но сначала я пытаюсь выяснить, возможно ли добавить ссылку на изображение из галереи сетки.

Подробнее здесь: https://stackoverflow.com/questions/796 ... -any-image

Вернуться в «CSS»