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

[Anonymous]

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

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

.galeria_grid_ly {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}

.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;
}< /code>


[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]

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