Ist es möglich, eine Gittergalerie auf einem Bild hinzuzufügen? ⇐ HTML

[Anonymous]

Ich versuche, 4 Bilder aus einer Gittergalerie Links hinzuzufügen, aber das ist ein Chaos. Ich fange an zu vermuten, dass es inkompatibel ist. Ich versuche sogar einen Übergang zu machen ..... < /p>
Sie können den Übergang ignorieren, aber wenn Sie mir auch dabei helfen können, ist es sogar noch besser. < /P>

Code: Select all

 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;

}

Der Zweck ist, dass jedes Bild in der Mitte ein Quadrat erstellt, aber zuerst versuche ich herauszufinden, ob es möglich ist>