« Web, HTML, Tech Forum

instagram picture layouts :3

soooo i made some cute lil instagram type layouts for uploading pics to your profile!


heres the normal one for just photos :


<!-- (c) Layout created by chaos_kittyy -->


<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-width: 480px; margin: auto;">

  <div style="width: 120px; height: 120px; overflow: hidden; border-radius: 12px;">

    <img src="INSERT URL HERE" style="width: 100%; height: 100%; object-fit: contain;"/>

  </div>

  <div style="width: 120px; height: 120px; overflow: hidden; border-radius: 12px;">

    <img src="INSERT URL HERE" style="width: 100%; height: 100%; object-fit: contain;"/>

  </div>

  <div style="width: 120px; height: 120px; overflow: hidden; border-radius: 12px;">

    <img src="INSERT URL HERE" style="width: 100%; height: 100%; object-fit: contain;"/>

  </div>

  <div style="width: 120px; height: 120px; overflow: hidden; border-radius: 12px;">

    <img src="INSERT URL HERE" style="width: 100%; height: 100%; object-fit: contain;"/>

  </div>

</div>



and heres one you can hover over and see little captions :))

<!-- (c) Layout created by chaos_kittyy -->


<style>

  .gallery {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    gap: 10px;

    max-width: 480px;

    margin: auto;

  }

  .gallery-item {

    position: relative;

    width: 120px;

    height: 120px;

    border-radius: 12px;

    overflow: hidden;

  }

  .gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

  }

  .caption {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    background: rgba(0,0,0,0.6);

    color: #fff;

    font-size: 12px;

    padding: 5px;

    text-align: center;

    opacity: 0;

    transition: opacity 0.3s ease;

  }

  .gallery-item:hover .caption {

    opacity: 1;

  }

</style>


<div class="gallery">

  <div class="gallery-item">

    <img src="INSERT URL HERE" alt="Selfie 1"/>

    <div class="caption">INSERT TEXT HERE</div>

  </div>

  <div class="gallery-item">

    <img src="INSERT URL HERE" alt="Selfie 2"/>

    <div class="caption">INSERT TEXT HERE</div>

  </div>

  <div class="gallery-item">

    <img src="INSERT URL HERE" alt="Selfie 3"/>

    <div class="caption">INSERT TEXT HERE</div>

  </div>

  <div class="gallery-item">

    <img src="INSERT URL HERE" alt="Selfie 4"/>

    <div class="caption">INSERT TEXT HERE</div>

  </div>

</div>


lmk if you use them! i would love to check it out on your page! <33 


xx - rainaaa



Report Topic

1 Reply

Reply by ashton

posted

im surprised how little attention this has gotten!!!! so underrated :D


Permalink Report Reply