Ist es möglich, eine Gittergalerie auf einem Bild hinzuzufügen? [geschlossen] ⇐ CSS

[Anonymous]

Ich versuche, 4 Bilder aus einer quadratischen Galerie in der Gitter -Quadratform in der Mitte mit runden Ecken Links hinzuzufügen. Und dann schweben Sie sie und machen Sie sie größer, so wie sie in Richtung seiner Eckrichtung wachsen. Ich vermute, dass es unmöglich ist, das zu machen, weil es mit jeder Eigenschaft unvereinbar ist. < /P>
Ich akzeptiere Vorschläge, um etwas Ähnliches zu machen.

Code: Select all

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


< /code>
CSS < /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;

}