Как я могу создать веб-страницу, которая может генерировать случайные изображения, специфичные для определенного места? ⇐ CSS

[Anonymous]

Я хочу создать веб-страницу с несколькими блоками изображений. каждый блок должен генерировать случайные изображения, но они должны быть специфичными для конкретного места или места, например, один блок изображений генерирует случайное изображение статуи свободы, другой должен генерировать случайные изображения Тадж-Махала. и так далее.
Я пытался сгенерировать с помощью «URL-адреса генератора случайных изображений unsplash», но они не привязаны к конкретным местам.
вот мой код ---

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

*{
/* background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(https://source.unsplash.com/random/900×900/?nature,scene,greenland,snowland);  */
margin:0;
padding:0;
box-sizing: border-box;
}

body{
background-color: rgb(244,244,244);
}

.container{
max-width: 1200px;
margin:0 auto;
padding:20px;
overflow-x: hidden;
/* overflow-y: auto; */
}

.container h1{
text-align: center;
/* font-size: ; */
margin: 2rem 2rem;
font-size: 4rem;
letter-spacing: 4px;
}

.gallery{
display: flex;
position:relative;
/* height:100%; */
flex-wrap: wrap;
justify-content: space-between;

}

.image-box{
height: 393px;
width:32%;
margin-bottom:20px;
/* border:2PX SOLID YELLOW; */
object-fit: cover;
border-radius: 10px;
overflow: hidden;
}

.image-box img{
height:100%;
width:100%;
filter: grayscale(100%);
box-shadow: 0 0 20px #333;
object-fit: cover;
max-height: 100%;
max-width:100%;

}

.image-box:hover{
cursor: pointer;
transform: scale(1.03);
transition: 0.5s;
filter: drop-shadow(10px 10px 10px #333);
}

.image-box:hover img{
filter: grayscale(0%);
}

.image-box figcaption{
opacity: 0;
position: absolute;
bottom:0;
left:0;
color: aliceblue;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
width:100%;
padding:20px;
font-size: 1.4rem;
font-weight: 900;

}

.image-box:hover figcaption{
opacity: 1;
transition: 1s;

}

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

My Gallery


[img]https://source.unsplash.com/random/300×300/?tajmahal[/img]

image1




[img]https://source.unsplash.com/random/350x350/?shillong,arunachal-pradesh,valley, natural-scenes

image2




[img]https://source.unsplash.com/random/300×300/?rajasthan, palaces, natural-scenes[/img]
image3




[img]https://source.unsplash.com/random/300×300/?mountain, india, scenes, nature[/img]
image4




[img]https://source.unsplash.com/random/300×300/?lucknow, kashi, agori, kumbh-mela[/img]
image5




[img]https://source.unsplash.com/random/300×300/?kedarnath,kedarnath-view, lord-shiva[/img]
image6




[img]https://source.unsplash.com/random/300×300/?delhi, city-life, beautiful-images, new-delhi, jantar-mantar, red-fort, parliament[/img]
image7




[img]https://source.unsplash.com/random/300×300/?aganta-caves, allora-caves[/img]
image8




[img]https://source.unsplash.com/random/300×300/?kashmir, dal-lake[/img]
image9




[img]https://source.unsplash.com/random/300×300/?kerala, tamilnadu, south-india-nature[/img]
                    alt="image1">
image10




[img]https://source.unsplash.com/random/300×300/?beautiful-nature, india[/img]
                    alt="image1">
image11




[img]https://source.unsplash.com/random/350x350/?lotus-temple

image12




[img]https://source.unsplash.com/random/350x350/?gwalior-fort

image12




[img]https://source.unsplash.com/random/350x350/?mehrangarh-fort[/img]
image12




[img]https://source.unsplash.com/random/350x350/?pangong-lake

image12

также вот полученная веб-страница ---
введите здесь описание изображения
пожалуйста, ответьте на вопрос. Как мне добиться этого проще всего?

Подробнее здесь: https://stackoverflow.com/questions/765 ... -particula