✨Creating Hexagon Images✨

  • 3
  • Article
  • Updated 3 years ago
  • (Edited)
In this article, we'll be focusing on hexagonal images.

Please note that changing the code below may be a bit tricky, so I would recommend being diligent with your backups. To make a backup of your Presentation, go to the HTML Tab of the Presentation Editor, and save all that HTML Code to Notepad or a Google Doc. All the HTML and CSS coding we do in this article may be best edited in a separate text editor like Google Docs or Notepad.

The Presentation you are going to create will look like the below images:


To start, create a new Presentation at https://apps.risevision.com/editor. I've decided to use 1920x1080 as my resolution.

Once you have created your Presentation, add the HTML Widget. In that Widget, add the code below between the <head></head> tags:

<code>
<style>
.grid {
padding: 1px;
margin: 0 auto;
}

.grid--item {
position: relative;
margin-top: -90px;
margin-right: 5px;
margin-left: 5px;
width: calc(33.33% - 10px);
float: left;
transition: all 0.5s;
overflow: hidden;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.grid--item:before {
display: block;
padding-top: 120%;
content: '';
}
.grid--item:nth-child(1), .grid--item:nth-child(2) {
margin-top: 0;
}
.grid--item:nth-child(7n - 1), .grid--item:nth-child(1) {
margin-left: 165px;
}

.img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: center center;
background-size: cover;
overflow: hidden;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
</style>


In the <body></body> you can begin to populate the <div></div> tags with your own images, like in the example below:


<div class='grid'>

<div class='grid--item'>
<div class='img' style='background-image: url(https://storage.googleapis.com/risemedialibrary-960b72df-9af7-476b-8a47-b67ded4c779d/Own%20Designs/hannahsuarezart3.jpg);'></div>

</div>
<div class='grid--item'>
<div class='img' style='background-image: url(https://storage.googleapis.com/risemedialibrary-960b72df-9af7-476b-8a47-b67ded4c779d/Own%20Designs/hannahsuarezart6.jpg);'></div>
</div>
</div>


Once this is added in the HTML Widget make sure to maximize the Placeholder to view all content in the Widget.

Want to embed Vine.co videos instead of images, no problem! You can do that using iFrames. Here is an example of how that would look:



Vine.co has a playlist called Surfing Down Under so I grabbed the links to a couple of Vines and added them in as an <iframe> instead of images from Rise Storage.

Between the <head></head> tags:


<style>
.grid {
padding: 60px;
margin: 0 auto;
}

.grid--item {
position: relative;
margin-top: -90px;
margin-right: 5px;
margin-left: 5px;
width: calc(33.33% - 10px);
float: left;
transition: all 0.5s;
overflow: hidden;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.grid--item:before {
display: block;
padding-top: 112.5%;
content: '';
}
.grid--item:nth-child(1), .grid--item:nth-child(2) {
margin-top: 0;
}
.grid--item:nth-child(7n - 1), .grid--item:nth-child(1) {
margin-left: 185px;
}

.img {
position: absolute;
top: 24;
right: 0;
bottom: 0;
left: 0;
background-position: center center;
background-size: cover;
overflow: hidden;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

</style>


Between the <body></body> tags:


<div class='grid'>
<div class='grid--item'>
<div class='img'><iframe src="https://vine.co/v/iHTTDHz6Z2v/embed/simple" width="600" height="600" frameborder="0"></iframe><script src="https://platform.vine.co/static/scripts/embed.js"></script></div>
</div>

<div class='grid--item'>
<div class='img'><iframe src="https://vine.co/v/iwi7ZIrqawV/embed/simple" width="600" height="600" frameborder="0"></iframe><script src="https://platform.vine.co/static/scripts/embed.js"></script></div>
</div>
</div>


I also added a Text Widget and placed it just underneath the two hexagon images with the text “Surf’s up!"

And that's it! You can further tweak the above to suit your needs. With the example above, I tweaked the hexagon shape due to dimension restrictions with the Vine.co embed. You can try embedding other sources also to see how it looks.

Let us know what you think, and happy creating!

Credit to this Hexagon Grid example for the original source which provided a starting point for this post.
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb

Posted 3 years ago

  • 3
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb
I like fun CSS tips like this one.
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
Here is a great tool for creating clips in css. http://bennettfeely.com/clippy/