Question 190932 in Html Question posted in
Some basic documentation can be found here.

Html – how can I make a web page which can generate random images specific to particular location?

I want to make a webpage, having multiple image-box. each box should generate random images but they should be specific to a particular location or site like one image-box generate random image of statue of liberty, another should generate random images of taj mahal. and so on.

I tried to generate using "unsplash random image generator url", but these are not specific to particular places.
here is my code—

*{
    /* 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;
   

}
<body>

    <div class="container">
        <h1>My Gallery</h1>
        <div class="gallery">
            <figure class="image-box">
                <img src="https://source.unsplash.com/random/300×300/?tajmahal" alt="image1">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <figcaption>image1</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/350x350/?shillong,arunachal-pradesh,valley, natural-scenes
                    " alt="image1">
                <figcaption>image2</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?rajasthan, palaces, natural-scenes" alt="image1">
                <figcaption>image3</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?mountain, india, scenes, nature" alt="image1">
                <figcaption>image4</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?lucknow, kashi, agori, kumbh-mela" alt="image1">
                <figcaption>image5</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?kedarnath,kedarnath-view, lord-shiva" alt="image1">
                <figcaption>image6</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?delhi, city-life, beautiful-images, new-delhi, jantar-mantar, red-fort, parliament" alt="image1">
                <figcaption>image7</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?aganta-caves, allora-caves" alt="image1">
                <figcaption>image8</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?kashmir, dal-lake" alt="image1">
                <figcaption>image9</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?kerala, tamilnadu, south-india-nature"
                    alt="image1">
                <figcaption>image10</figcaption>
            </figure>

            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/300×300/?beautiful-nature, india's-most-beautiful-places"
                    alt="image1">
                <figcaption>image11</figcaption>
            </figure>


            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/350x350/?lotus-temple
" alt="image1">
                <figcaption>image12</figcaption>
            </figure>

            
            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/350x350/?gwalior-fort
                " alt="image1">
                <figcaption>image12</figcaption>
            </figure>

            
            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/350x350/?mehrangarh-fort" alt="image1">
                <figcaption>image12</figcaption>
            </figure>

            
            <figure class="image-box">
                <!-- <img src="https://codehelp-image-gallery.netlify.app/images/image1.jpg" alt="image"> -->
                <img src="https://source.unsplash.com/random/350x350/?pangong-lake
                " alt="image1">
                <figcaption>image12</figcaption>
            </figure>

           
        </div>
    </div>

</body>

also here is the resultant web page—
enter image description here

please answer that How can I achieve that in easiest way?

Tags:

3

Answers


  1. 0

    There are websites that offer services to generate random images and imbed it into HTML. you can use one of those

    Login or Signup to reply.
  2. 0

    Here is a random image api with catagories like nature, cars etc. You can use this API to get ramdom images and get images related to a catagory.

    Login or Signup to reply.
  3. 0

    I usually use loremflickr. Sometimes the tagging are not 100% accurate (especially for small images) but it free so I’m OK with that.

    <img src="https://loremflickr.com/300/300/tajmahal?random=1">
<img src="https://loremflickr.com/300/300/tajmahal?random=2">
<img src="https://loremflickr.com/300/300/tajmahal?random=3">
<img src="https://loremflickr.com/300/300/tajmahal?random=4">
<img src="https://loremflickr.com/300/300/tajmahal?random=5">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search