Tips for showcasing circles in a non-traditional layout

Is it possible to achieve the layout shown in the image below using CSS? I've tried using shape-outside: circle(); but it's not coming out as expected. Any suggestions on how to accomplish this?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Circles</title>

  <style>
  img {
    border-radius: 50%;
    shape-outside: circle();
    transition: transform .3s ease;
    padding: 5px;
  }
  img:hover {
    transform: scale(1.1);
  }
  </style>
</head>
<body>
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/100" />
</body>
</html>

https://i.sstatic.net/nmAJB.png

javascriptcss

Answer №1

If you want to organize your images using the grid layout, you can achieve this by utilizing the align-self and justify-self properties. By setting these properties with values like start, center, or end, you can arrange the images in a staggered manner:

img {
  border-radius: 50%;
  shape-outside: circle();
  transition: transform .3s ease;
  padding: 5px;
}

img:hover {
  transform: scale(1.05);
}

html, body{
   height: 100%;
   margin: 0;
}

body{
      background: rgba(0,0,0,0.3)
}

.grid{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   height: 100vh;
   min-height: 500px;
}

.grid > img:nth-child(1){
  align-self: end;
  justify-self: center;
}

.grid > img:nth-child(3){
  align-self: end;
}

.grid > img:nth-child(4){
  justify-self: end;
}

.grid > img:nth-child(5){
  justify-self: center;
  align-self: center;
}

.grid > img:nth-child(7){
  justify-self: end;
}

.grid > img:nth-child(8){
  align-self: center;
  justify-self: center;
}

.grid > img:nth-child(9){
  justify-self: center;
  align-self: center;
}
<div class="grid">
  <img src="https://picsum.photos/50" />
  <img src="https://picsum.photos/70" />
  <img src="https://picsum.photos/60" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/75" />
  <img src="https://picsum.photos/90" />
  <img src="https://picsum.photos/40" />
  <img src="https://picsum.photos/85" />
  <img src="https://picsum.photos/45" />
</div>

Answer №2

I have made updates to my CSS generator so that you no longer need to rely on the Javascript version. By running the javascript fiddle and inspecting the output in the console, you can copy and paste it into your CSS file. The first fiddle is used to generate the CSS while the second demonstrates how the CSS works dynamically as more photos are added, starting from the center outward.

Generate CSS in console: https://jsfiddle.net/jp7q6xa1/5/

Demo showing CSS only positioning: https://jsfiddle.net/rda5c46j/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Circles</title>

  <style>
  img {
    position:absolute;
    border-radius: 50%;
    shape-outside: circle();
    transition: transform .3s ease;
    padding: 5px;
  }
  img:hover {
    transform: scale(1.1);
  }
  .container {
    position:relative;
    border:1px solid black;
    width:1000px;
    height:1000px
  }
  </style>
  <script>

...
  // Entire script block here for adjusting layout

...
  </script>
</head>
<body>
<div id="spreadCircles" class="container">

  <!-- Repeat this line with different image sources -->

</div>

<script>adjustLayout("spreadCircles");</script>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to achieve perfect alignment for SVG text within its container, as opposed to stretching across the entire webpage

Recently, I've been working on a customizable photo frame designer using SVG. One of the key features allows users to add their own text to the frame. To achieve this, I'm utilizing jQuery's .keyup function. However, the issue I'm facin ...

jqueryhtmlcsssvg

The functionality of the anchor tag is not supported by the Safari browser on iPhone devices

Having some trouble with a named anchor tag in the iPhone Safari browser. It's functioning properly in desktop browsers, including Safari, but not working on mobile Safari. Odd! For instance, my URL appears as: http://www.example.com/my-example-arti ...

htmlcssiphonemobile-safarianchor

What steps can I take to resolve the issue in my code? I keep receiving a type error stating that it cannot read

I seem to be encountering an issue when running my code where I receive a 'cannot read property 'age' of null'. This error breaks my code, and I'm trying to figure out how to implement a check to ensure it only runs when I am signe ...

javascripthtmlreactjs

Using a set formatter in jqGrid within a personalized formatter

Can I incorporate a predefined formatter into a custom formatter? Here is an example using the colModel: colModel: [ ... { name: 'col1', formatter: myFormatter } ... ] Below is the custom formatter function: function myFormatter(cellVal ...

javascriptjqueryjqgrid

Traversing through data stored in a variable (JSON object)

Does anyone know how to loop through JSON data inside a variable? For example: var data = { $.each(data, function(i, item) { console.log(data[i].PageName); });​ ...

javascriptjson

Sharing data between different JavaScript files using Knockout.js

I am working with two JavaScript files named FileA.js and FileB.js. Within FileA.js, there is a function called Reports.CompanySearch.InitGrid: function InitGrid(viewModel, emptyInit) { var columns = [ { name: 'CompanyName', ...

javascripthtmlasp.net-mvc-4knockout.js

Tips for updating a plugin from phonegap 2.5 to the most recent version 3.1, and the steps to follow when including a new plugin in phonegap

$('#sendSms').click(function(e){ alert("Sending SMS in progress");//After this alert, I encountered continuous errors and couldn't determine the root cause var smsInboxPlugin = cordova.require('cordova/plugin/smsinboxplugin'); ...

javascriptjquerycordova

Ways to access a JavaScript function on a div with multiple identifiers

Currently working on developing a discussion panel using ASP.net, where each comment is assigned a unique id. I am looking to trigger the jQuery click function whenever a user clicks on a comment. However, since the comment ids are dynamically assigned an ...

c#javascriptjqueryasp.net

What could be causing the CSS border to not show up on the webpage?

I am trying to add a border to the footer, but it seems like something is blocking it from showing properly. Below are the CSS lines I have used: position: fixed; bottom: 0; right: 0; left: 0; clear: both; line-height: 1.36em; padding: 08px 0px 0px; tex ...

css

Utilize Jquery to dynamically update form input in real time based on checkbox selections

I am working on a form that requires real-time calculation of GST (Goods and Services Tax) directly within the form (GST = Price/11) This functionality has been implemented with the following script. Additionally, the calculation needs to be adjust ...

javascriptjqueryhtmlformscheckbox

When working in Javascript, make sure to replace newline and carriage return characters in strings with empty spaces. Also, don't forget to replace the literal sequences and

When working with Javascript, I am looking to perform multiple string replacements as outlined below. Remove all newlines and carriage returns Swap out instances of \n with a newline character Change occurrences of \r with a carriage return char ...

javascriptnode.js

What is the best way to ensure that my <h1> header stays above my <h2> header at all times?

As a novice in web design, I recently took on the challenge of creating my own website. I am a graphic designer and came up with a mock-up of how I envision the site to look. While I managed to complete most parts of it, there's one specific area wher ...

htmlcssheaderpositionalignment

Tips for generating JavaScript within list elements using a PHP script

My PHP script is designed to fetch data from a database and display it as list items within a jQuery Dialog. The process involves creating an array in the PHP while loop that handles the query results, with each list item containing data, an HTML button, a ...

phpjavascript

What is the best way to update the switchery checkbox after it has already been initialized?

I have set up the switchery using the code snippet below. var ss_is_schedule_edit = document.querySelector('.ss_is_schedule_edit'); var mySwitch = new Switchery(ss_is_schedule_edit, { color: '#8360c3' }); However, I am unable to toggle ...

javascriptjqueryswitchery

Identifying instances where the AJAX success function exceeds a 5-second duration and automatically redirecting

Greetings! I have created a script that allows for seamless page transitions using Ajax without reloading the page. While the script functions perfectly, I am seeking to implement a feature that redirects to the requested page if the Ajax request takes lo ...

javascriptphpjqueryajax

Extension for Chrome - view source of current webpage

I'm attempting to develop my chrome extension to extract the current page source and identify the current URL, as seen in this example. If I were to visit https://www.google.com and the page source contains google I want my extension to display a ...

javascripthtmlgoogle-chrome-extension

Querying an array using the Contentful API

Recently, I've been experimenting with the Contentful API (content delivery npm module) and have encountered a challenge that I'm not sure how to overcome. In my Contentful setup, I have a content type called tag which consists of one field, als ...

javascriptjsonnode.jsapicontentful

Move the iframe to the back on Internet Explorer

I am currently in the process of creating a webpage that features a popup div (utilizing javascript/jquery) to display some text. However, I am encountering a problem where, in Internet Explorer, a youtube embedded video (iframe) remains in front of the po ...

javascriptjqueryhtmlcss

The error occurring in the React app is a result of the page rendering prior to the API data being fetched

Utilizing the following component for my Nav, I aim to showcase the current weather based on the user's location. However, an issue arises as the page is being rendered before retrieving data from the openWeather API. import React, { useState, useEffe ...

javascriptreactjsreact-nativeapi

The CSS table-cell element causes adjacent table-cell content to reposition

The table inside the "center" div is causing the contents in the "left" div to be offset by a few pixels from the top (about 8 in my browser). When you add some text before the table, this offset disappears. Why is this happening? Is there a way to preven ...

htmlcsscss-tables