Creating an Instagram-style frame effect for your HTML page using CSS

Question

Creating an Instagram-style frame effect for your HTML page using CSS

https://i.sstatic.net/SnkO7.jpg

Trying to figure out how to align images like in the picture above. Here's the code I've been working with:

<html>
<head>
<style>
.main
{
    width: 634px;
    height: 634px;
}
.img1
{
    width: 315px;
    height: 315px;
}
</style>
</head>
<body>
<img src="photo/01.jpg" class="main"><br>
<img src="photo/05.jpg" class="img1">
<img src="photo/01.jpg" class="img1">
<img src="photo/01.jpg" class="img1">
</body>
</html>

Looking to achieve an instaframe effect on my HTML page. Struggling to add images to the right side though.

html css image

Answer 1

Answer №1

To achieve the desired effect, you can utilize floating in your design:

.main {
  width:80%; /* set the width as needed */
  overflow:auto; /* clear the floats */
}

.main img {
  width:33.33%; /* make the images responsive, typically 3 images per row */
  height: auto; /* maintain image proportion by resizing height based on width */
  float:left; /* float the images to the left */
  border:2px solid white; /* add an optional border */
  box-sizing:border-box; /* ensure the border does not affect the total width */
}

.main img.big {
  width:66.66%; /* allocate 2/3 of the grid size to a big image */
}

<div class="main">
  <img src="https://placehold.it/100x100" class="big">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
</div>

It's advisable to enclose the floated elements within a common parent to prevent them from affecting other page elements. In this example, the parent is <div class="main">.

Check out the demo on jsFiddle

Answer 2

To achieve the desired effect, you can utilize floating in your design:

.main {
  width:80%; /* set the width as needed */
  overflow:auto; /* clear the floats */
}

.main img {
  width:33.33%; /* make the images responsive, typically 3 images per row */
  height: auto; /* maintain image proportion by resizing height based on width */
  float:left; /* float the images to the left */
  border:2px solid white; /* add an optional border */
  box-sizing:border-box; /* ensure the border does not affect the total width */
}

.main img.big {
  width:66.66%; /* allocate 2/3 of the grid size to a big image */
}

<div class="main">
  <img src="https://placehold.it/100x100" class="big">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
</div>

It's advisable to enclose the floated elements within a common parent to prevent them from affecting other page elements. In this example, the parent is <div class="main">.

Check out the demo on jsFiddle

Answer 3

Answer №2

To achieve this layout, you can utilize CSS3 flexbox. Check out the code snippet below; it's advisable to use % or ems instead of fixed height/width:

While floating elements, as mentioned in the previous answer, may result in a visually appealing layout, flexbox offers an alternative approach to attain the same results.

Take a look at the demo: jsFiddle

.main {
  width: 300px;
  height: 300px;
}

.img {
  width: 150px;
  height: 150px;
}

.rowContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.columnContainer {
  display: flex;
  flex-direction: column;
}

.mainContainer {
  width: 450px
}

<div class="mainContainer">
    <div class="columnContainer">

      <div class="rowContainer">
        <img class="main">
        <div class="columnContainer">
          <img class="img">
          <img class="img">
        </div>
      </div>

      <div class="rowContainer">
        <img class="img">
        <img class="img">
        <img class="img">
        <img class="img">
        <img class="img">
        <img class="img">
      </div>
    </div>
</div>

Answer 4

To achieve this layout, you can utilize CSS3 flexbox. Check out the code snippet below; it's advisable to use % or ems instead of fixed height/width:

While floating elements, as mentioned in the previous answer, may result in a visually appealing layout, flexbox offers an alternative approach to attain the same results.

Take a look at the demo: jsFiddle

.main {
  width: 300px;
  height: 300px;
}

.img {
  width: 150px;
  height: 150px;
}

.rowContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.columnContainer {
  display: flex;
  flex-direction: column;
}

.mainContainer {
  width: 450px
}

<div class="mainContainer">
    <div class="columnContainer">

      <div class="rowContainer">
        <img class="main">
        <div class="columnContainer">
          <img class="img">
          <img class="img">
        </div>
      </div>

      <div class="rowContainer">
        <img class="img">
        <img class="img">
        <img class="img">
        <img class="img">
        <img class="img">
        <img class="img">
      </div>
    </div>
</div>

Creating an Instagram-style frame effect for your HTML page using CSS

Answer №1

Answer №2

Similar questions

Basic stacked or segmented bar in HTML

Find a solution to splitting the area in half, with one side designated for the icon and the other for text

Ways to resolve the issue of being unable to retrieve data using jQuery

Delay the rendering of the MUI DataGrid column until after the DataGrid is visible on the screen

Exploring the depths: Retrieving nested object attributes using ngFor

Running a CSS keyframes animation can be achieved by removing the class associated with it

When it comes to adjusting the height of an element, there are two ways to go about it: using $(element).height

Using Javascript to dynamically add SVGs from an array

displaying a div upon checking the checkbox

Looking to sanitize an array of objects in Node.js? If you find that manually iterating through it only returns 'object Object', there are alternative methods to properly

What is the best way to retrieve the inner HTML or text content of a tag?

The stacking order of React components

Transforming the appearance of a clickable link when tapped

Is it possible to use the same identifier for both the name and id attributes in HTML?

Divs that are floated and only partially visible at the end

Align the text vertically in a Bootstrap button

Leverage Hubspot and Google Analytics to transfer session source and medium data

Getting real-time comments after they have been submitted in ReactJS

Dimensions of Bootstrap carousel

Scaling down the screen for a smaller display