Position images in a non-grid like way

Question

I am trying to position images on a webpage in sort of "thought cloud" effect as per my image below. These will eventually become links to the other pages on the site and serve as the navigation.

What I have so far is an upside-down pyramid of centred images as below. They look OK but I would like them to have more of a free floating feel within the allowed area, whilst remaining responsive to the resolution.

Any advice on a css/JavaScript solution much appreciated.

.middle {
  text-align: center;
}

div.middle>a>img {
    width: 5%;
    height: auto;
    margin: 1%;    
    display: inline-block;
}

div.middle>a>img:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

.bottom {
  text-align: center;
  position: bottom;
}

<html lang="en">

<div class="middle">
<a href="#">  
    <img src="https://s-media-cache-ak0.pinimg.com/236x/cd/60/1b/cd601b925a3a4e9d8f014628cdc5319f.jpg"></img>
</a>  
  <a href="#">  
    <img src="http://cache3.asset-cache.net/xc/483563191.jpg?v=2&c=IWSAsset&k=2&d=dfVQxw_RW01UllXQDJmANBGyEsfRlCvmFFMTHdsW-_udu5G3Hp3lOIXpI8ZvjGSw0" class="img-responsive"></img> 
</a>  
<a href="#">    
 <img href="#" src="http://gallerydrawing.net/wp-content/uploads/2015/10/flower-vase-drawing-image-CpJh.jpg" class="img-responsive"></img>
</a>  
<br/>
  <a href="#">  
<a href="#"><img src="http://mhaycock.com/SiteImages/FrenchHorn.jpg" class="img-responsive"></img>
</a>
  <a href="#">  
 <img href="#" src="https://s-media-cache-ak0.pinimg.com/736x/58/82/0f/58820fd15cfc243b51df0f79aa209569.jpg" class="img-responsive"></img>
</a>  
<br/>
<a href="#">  
 <img src="https://thelingerieaddict-treaclemediallc.netdna-ssl.com/wp-content/uploads/Vintage-Corset-1.jpg" class="img-responsive"></img>
</a>
  
  
</div>  
<div class="bottom">
  <img href="#" src="https://s-media-cache-ak0.pinimg.com/236x/6e/69/cc/6e69cc9a8f346afffa4e198fd68df3b3.jpg" class="img-responsive"></img>
</div>

</html>

score 1 · Accepted Answer · edited May 23 '17 at 12:15

Option 1 - CSS

If you want a quick solution that doesn't require many changes and that doesn't complicate things with JavaScript, maybe you could "spice up" a little the design by using some CSS:

Break the grid-look by no longer having all the images aligned:
- Add random margins (use percentages to keep it looking similar in different sizes).
- Use different vertical alignments (baseline, middle, bottom, top...).
Transform the images so they are not all pointing towards the same direction (notice the transformation will be overridden on mouse over unless you add specific values for :hover):
- Add random rotations (use positive and negative values) and play with different transform-origin values.
- Do not limit to rotate: skew, translate, scale...
Experiment with other CSS properties and filters.

It still will be a triangle, but now it won't be as evident. For example, this is a suggestion:

.middle {
  text-align: center;
}

div.middle > a > img {
    width: 5%;
    height: auto;
    margin: 1%;    
    display: inline-block;
}

div.middle a:nth-of-type(1) img {
  transform:rotate(-15deg);
  margin-right:-2%;
  vertical-align:baseline;
}

div.middle a:nth-of-type(2) img {
  transform:rotate(-15deg);
  vertical-align:middle;
}

div.middle a:nth-of-type(3) img {
  vertical-align:bottom;
  transform:rotate(15deg);
}

div.middle a:nth-of-type(4) img {
  margin-right:5%;
  transform:skew(12deg);
}

div.middle a:nth-of-type(5) img {
   transform:rotate(-33deg);
}

div.middle a:nth-of-type(6) img {
   transform:rotate(33deg);
  margin-top:-30%;
}

div.middle > a > img:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

.bottom {
  text-align: center;
  position: bottom;
}

<div class="middle">
  <a href="#"><img src="https://s-media-cache-ak0.pinimg.com/236x/cd/60/1b/cd601b925a3a4e9d8f014628cdc5319f.jpg"/></a>  
  <a href="#"><img src="http://cache3.asset-cache.net/xc/483563191.jpg?v=2&c=IWSAsset&k=2&d=dfVQxw_RW01UllXQDJmANBGyEsfRlCvmFFMTHdsW-_udu5G3Hp3lOIXpI8ZvjGSw0" class="img-responsive"/></a>  
  <a href="#"><img href="#" src="http://gallerydrawing.net/wp-content/uploads/2015/10/flower-vase-drawing-image-CpJh.jpg" class="img-responsive"/></a>
  <br/>
  <a href="#"><img src="http://mhaycock.com/SiteImages/FrenchHorn.jpg" class="img-responsive"/></a>  
  <a href="#"><img href="#" src="https://s-media-cache-ak0.pinimg.com/736x/58/82/0f/58820fd15cfc243b51df0f79aa209569.jpg" class="img-responsive"/></a>  
  <br/>
  <a href="#"><img src="https://thelingerieaddict-treaclemediallc.netdna-ssl.com/wp-content/uploads/Vintage-Corset-1.jpg" class="img-responsive"/></a>
</div>  
<div class="bottom">
  <img href="#" src="https://s-media-cache-ak0.pinimg.com/236x/6e/69/cc/6e69cc9a8f346afffa4e198fd68df3b3.jpg" class="img-responsive"/>
</div>

Option 2 - JavaScript

Set the div.middle to have a relative position.
Set the images to have an absolute position.
Randomly place the images within the container.

The main issue with that is that you will probably want to avoid collisions so the images don't overlap. For that you could use several algorithms or plugins that can be as complex as you want. My recommendation: don't reinvent the wheel. You can find many solutions for this on StackOverflow, use one that works for you.

Another possible problem is that you may actually want to keep that triangular feeling so it seems that the images are coming out of the head as ideas. In that case, the solutions linked above may not work for you and you may need to create your own.

Option 3 - CSS and JavaScript

Don't limit to one solution or the other: combine them! Don't just place the images randomly with JavaScript, use CSS to transform them too. Rotate them, skew them, translate them (although that may be useless now), add animations so some of the images "shake" or "dance" at random times to catch the users attention...

Thanks so much for the answer I think the CSS alone might do it. However when I copy the CSS in to Wordpress site it doesn't seem to be working. Any idea why? http://iancolenutt.com/ — notidaho, Dec 04 '15 at 17:06
The solution above is specific to the code, maybe something changed. Could you share the failing code? or an URL to see it? — Alvaro Montoro, Dec 04 '15 at 17:36
The failing code is the exact same as what you posted above, which works everywhere but WordPress. The URL is www.iancolenutt.com — notidaho, Dec 10 '15 at 09:01
There is a `
` after each picture (so they'll be displayed as a vertical line instead of as a triangle). Also, in some of the styling there is an `!important` that overrides the specific styles for the images — Alvaro Montoro, Dec 10 '15 at 13:32
Yes I added the !important to try fix the issue but in the end I found a WordPress plugin that suppresses the addition of
between each image (?!). Now I just need to find out why there are blue lines through each row of images. Not a great intro to Wordpress! — notidaho, Dec 10 '15 at 14:50
It's interesting. I don't know exactly why they are appearing either, but you can get rid of them by adding this style: `.middle a { color:transparent; }` (then the lines will be transparent and not visible) — Alvaro Montoro, Dec 10 '15 at 16:08

Position images in a non-grid like way

1 Answers1