CODEWITHSUNDEEP
htmlcssshapescss-shapes
mateikav
mateikav

Reputation: 93

Images inside of css-based hexagons

I'm using James Tauber's hexagon tutorial to create a honeycomb-styled navigation. I have the orientation that I want, but I am having trouble figuring out how to add images to the inside of the hexagons. Is the code in the jsfiddle not optimized for putting images inside of the hexagons or am I not seeing something?

I realize that there are other questions about putting images inside of hexagons, but none of them really helped me.

Advice would be appreciated.

HTML:

.hex {
      float: left;
      margin-right: -26px;
      margin-bottom: -50px;
    }
    .hex .left {
      float: left;
      width: 0;
      border-right: 30px solid #444;
      border-top: 52px solid transparent;
      border-bottom: 52px solid transparent;
    }
    .hex .middle {
      float: left;
      width: 60px;
      height: 104px;
      background: #444;
    }
    .hex .right {
      float: left;
      width: 0;
      border-left: 30px solid #444;
      border-top: 52px solid transparent;
      border-bottom: 52px solid transparent;
    }
    .hex-row {
      clear: left;
    }
    .hex.even {
      margin-top: 53px;
    }
    #wrap {
      min-width: 600px;
    }
<div id="wrap">
  <div class="hex-row">
    <a href="http://www.google.ca">
      <div class="hex">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
      </div>
    </a>

    <div class="hex even">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="hex">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="hex even">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="hex">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </div>
</div>

Upvotes: 2

Views: 6222

Answers (3)

jbutler483
jbutler483

Reputation: 24559

Tutorial

A quick mockup created:

.hex {
  width: 150px;
  height: 86px;
  background-color: #ccc;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 173px;
  position: relative;
  float: left;
  margin: 25px 5px;
  text-align: center;
  zoom: 1;
}
.hex.hex-gap {
  margin-left: 86px;
}
.hex a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999em;
  position: absolute;
  top: 0;
  left: 0;
}
.hex .corner-1,
.hex .corner-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: -2;
  overflow: hidden;
  backface-visibility: hidden;
}
.hex .corner-1 {
  z-index: -1;
  transform: rotate(60deg);
}
.hex .corner-2 {
  transform: rotate(-60deg);
}
.hex .corner-1:before,
.hex .corner-2:before {
  width: 173px;
  height: 173px;
  content: '';
  position: absolute;
  background: inherit;
  top: 0;
  left: 0;
  z-index: 1;
  background: inherit;
  background-repeat: no-repeat;
  backface-visibility: hidden;
}
.hex .corner-1:before {
  transform: rotate(-60deg) translate(-87px, 0px);
  transform-origin: 0 0;
}
.hex .corner-2:before {
  transform: rotate(60deg) translate(-48px, -11px);
  bottom: 0;
}
/* Custom styles*/

.hex .inner {
  color: #eee;
}
.hex h4 {
  font-family: 'Josefin Sans', sans-serif;
  margin: 0;
}
.hex hr {
  border: 0;
  border-top: 1px solid #eee;
  width: 60%;
  margin: 15px auto;
}
.hex p {
  font-size: 16px;
  font-family: 'Kotta One', serif;
  width: 80%;
  margin: 0 auto;
}
.hex.hex-1 {
  background: #74cddb;
}
.hex.hex-2 {
  background: #f5c53c;
}
.hex.hex-3 {
  background: #80b971;
}
<div class="hex hex-3">
  <div href="#" class="inner">
    <h4>CONTACT US</h4>
    <hr />
    <p>We Open Everyday</p>
  </div>
  
  <div class="corner-1"></div>
  <div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(http://placekitten.com/g/300/300);">
  <a href="#"></a>
  <div class="corner-1"></div>
  <div class="corner-2"></div>
</div>

Yes, Yes you can do this. There's a little maths involved to create them, but it look's pretty cool once put together!

body {
  background-color: cyan;
}
.hexrow {
  white-space: nowrap;
  /*right/left margin set at (( width of child div x sin(30) ) / 2) makes a fairly tight fit; a 3px bottom seems to match*/
  margin: 0 25px 3px;
}
.hexrow > div {
  width: 100px;
  height: 173.2px;
  /* ( width x cos(30) ) x 2 */
  /* For margin:
    right/left = ( width x sin(30) ) makes no overlap 
    right/left = (( width x sin(30) ) / 2) leaves a narrow separation
    */
  margin: 0 25px;
  position: relative;
  background-image: url(http://i1166.photobucket.com/albums/q605/Artem_Lebedev/dog-training-collars.jpg);
  background-position: -50px 0;
  /* -left position -1 x width x sin(30) */
  background-repeat: no-repeat;
  background-size: auto 120%;
  color: #000000;
  text-align: center;
  line-height: 173.2px;
  /*equals height*/
  display: inline-block;
}
.hexrow > div:nth-child(odd) {
  top: 43.3px;
  /* ( width x cos(30) / 2 ) */
}
.hexrow > div:nth-child(even) {
  top: -44.8px;
  /* -1 x( ( width x cos(30) / 2) + (hexrow bottom margin / 2)) */
}
.hexrow > div > div:first-of-type {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  background-image: inherit;
  -ms-transform: rotate(60deg);
  /* IE 9 */
  -moz-transform: rotate(60deg);
  /* Firefox */
  -webkit-transform: rotate(60deg);
  /* Safari and Chrome */
  -o-transform: rotate(60deg);
  /* Opera */
  transform: rotate(60deg);
}
.hexrow > div > div:first-of-type:before {
  content: '';
  position: absolute;
  width: 200px;
  /* width of main + margin sizing */
  height: 100%;
  background-image: inherit;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto 120%;
  bottom: 0;
  left: 0;
  z-index: 1;
  -ms-transform: rotate(-60deg) translate(-150px, 0);
  /* IE 9 */
  -moz-transform: rotate(-60deg) translate(-150px, 0);
  /* Firefox */
  -webkit-transform: rotate(-60deg) translate(-150px, 0);
  /* Safari and Chrome */
  -o-transform: rotate(-60deg) translate(-150px, 0);
  /* Opera */
  transform: rotate(-60deg) translate(-150px, 0);
  -ms-transform-origin: 0 0;
  /* IE 9 */
  -webkit-transform-origin: 0 0;
  /* Safari and Chrome */
  -moz-transform-origin: 0 0;
  /* Firefox */
  -o-transform-origin: 0 0;
  /* Opera */
  transform-origin: 0 0;
}
.hexrow > div > div:last-of-type {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
  overflow: hidden;
  background-image: inherit;
  -ms-transform: rotate(-60deg);
  /* IE 9 */
  -moz-transform: rotate(-60deg);
  /* Firefox */
  -webkit-transform: rotate(-60deg);
  /* Safari and Chrome */
  -o-transform: rotate(-60deg);
  /* Opera */
  transform: rotate(-60deg);
}
.hexrow > div > div:last-of-type:before {
  content: '';
  position: absolute;
  width: 200px;
  /* starting width + margin sizing */
  height: 100%;
  background-image: inherit;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto 120%;
  bottom: 0;
  left: 0;
  z-index: 1;
  /*translate properties are initial width (100px) and half height (173.2 / 2 = 86.6) */
  -ms-transform: rotate(60deg) translate(100px, 86.6px);
  /* IE 9 */
  -moz-transform: rotate(60deg) translate(100px, 86.6px);
  /* Firefox */
  -webkit-transform: rotate(60deg) translate(100px, 86.6px);
  /* Safari and Chrome */
  -o-transform: rotate(60deg) translate(100px, 86.6px);
  /* Opera */
  transform: rotate(60deg) translate(100px, 86.6px);
  -ms-transform-origin: 100% 0;
  /* IE 9 */
  -webkit-transform-origin: 100% 0;
  /* Safari and Chrome */
  -moz-transform-origin: 100% 0;
  /* Firefox */
  -o-transform-origin: 100% 0;
  /* Opera */
  transform-origin: 100% 0;
}
.hexrow > div > span {
  display: inline-block;
  margin: 0 -30px;
  line-height: 1.1;
  vertical-align: middle;
  white-space: normal;
}
.hexrow:nth-child(2) > div:nth-child(1) {
  background-image: url(http://i724.photobucket.com/albums/ww244/NBAchikk1995/flowers.jpg);
}
.hexrow:nth-child(2) > div:nth-child(1) > span {
  /*change some other settings*/
  margin: 0 -20px;
  color: black;
  font-size: .8em;
  font-weight: bold;
}
.hexrow:nth-child(2) > div:nth-child(2) {
  background-image: url(http://i197.photobucket.com/albums/aa231/sterling_red/landscape.jpg);
  color: #ffffff;
}
.hexrow:nth-child(2) > div:nth-child(3) {
  background-image: url(http://i257.photobucket.com/albums/hh204/h22prld98/2157781306_7a7a8e4cf7.jpg);
  opacity: .3;
  color: #ffffff;
}
.hexrow:nth-child(2) > div:nth-child(3) > div:before {
  /* nothing special needed here */
}
.hexrow:nth-child(2) > div:nth-child(4) {
  background-image: url(http://i916.photobucket.com/albums/ad8/paulak100/Obraz395.jpg);
  /*you can shift a large background image, but it can get complicated
    best to keep the image as the total width (200px) and height (174px)
    that the hex would be.
    */
  background-position: -150px -20px;
}
.hexrow:nth-child(2) > div:nth-child(4) > div:before {
  background-position: -100px -20px;
  /* the left shift is always less in the pseudo elements by the amount of the base shift */
}
<div class="hexrow">
  <div>
    <span>Any text you would like (that fits).</span>
    <div></div>
    <div></div>
  </div>
  <div>
    <span>Really, change the text to say what you want!</span>
    <div></div>
    <div></div>
  </div>
  <div>
    <span>I'm not kidding here.</span>
    <div></div>
    <div></div>
  </div>
  <div>
    <span>Okay?</span>
    <div></div>
    <div></div>
  </div>
</div>

<div class="hexrow">
  <div>
    <span>Did I mention you can change images? I mean, really, these are just rectangular images "cropped" to a hex shape (well, more complicated than just a crop, but the result is the same).</span>
    <div></div>
    <div></div>
  </div>
  <div>
    <span>See, another image!</span>
    <div></div>
    <div></div>
  </div>
  <div>
    <span>Testing opacity.</span>
    <div></div>
    <div></div>
  </div>
  <div>
    <span>Satisfied?</span>
    <div></div>
    <div></div>
  </div>
</div>

~SOURCE

Here is also a great example of this design!

Upvotes: 1

Cow
Cow

Reputation: 769

Alrighty, well I couldn't do it with your way of making hexagons, since it is just a hole bunch-a borders (background-image doesn't work with borders). But I found another way, using @geoffrey_crofte's solution on codepen.

To start, here is the JSFiddle with the working example.

And here is the updated code.

HTML:

<div id="wrap">
<div class="hex-row">
    <a href="http://www.google.ca" class='hexaHolder'>
        <div class="hexa">
            <div class="hex1">
                <div class="hex2">
                    <img src="http://farm3.staticflickr.com/2788/4392569951_8bcec3b3ed_z.jpg?zz=1" alt="" />
                </div>
            </div>
        </div>
    </a>
    <a href="http://www.google.ca" class='hexaHolder even'>
        <div class="hexa">
            <div class="hex1">
                <div class="hex2">
                    <img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" />
                </div>
            </div>
        </div>
    </a>
    <a href="http://www.google.ca" class='hexaHolder'>
        <div class="hexa">
            <div class="hex1">
                <div class="hex2">
                    <img src="http://farm3.staticflickr.com/2178/3531465579_8bff044e9b_z.jpg?zz=1" alt="" />
                </div>
            </div>
        </div>
    </a>
    <a href="http://www.google.ca" class='hexaHolder even'>
        <div class="hexa">
            <div class="hex1">
                <div class="hex2">
                    <img     src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" />
                </div>
            </div>
        </div>
    </a>
    <a href="http://www.google.ca" class='hexaHolder'>
        <div class="hexa">
            <div class="hex1">
                <div class="hex2">
                    <img src="http://farm4.staticflickr.com/3637/3658139504_c33433f163_z.jpg?zz=1" alt="" />
                </div>
            </div>
        </div>
    </a>
</div>
</div>

CSS:

.hexaHolder{
    height: 115px;
    width: 99px;
    float: left;
}
.hexa img{
    width:100%;
    margin-top: -5px;
}
.hexa, .hexa div {
    margin: 0 auto;
    transform-origin: 50% 50%;
    overflow: hidden;
}
.hexa {
    text-align: center;
    margin: 0;
    width: 135px;
    height: 115px;
}
.hexa div {
  width: 100%;
  height: 100%;
}
.hexa {
  transform: rotate(120deg);
}
.hex1 {
  transform: rotate(-60deg);
}
.hex2 {
  transform: rotate(-60deg);
}

.hex-row {
    clear: left;
}

.hexaHolder.even {
    margin-top: 57.5px;
}

#wrap {
    min-width:600px;    
}

Alrighty, so basically what I did was use the code from CodePen as a starting block since it already put an image inside of an hexagon. However, I modified the CSS a HTML a tad just so that you could float the hexagons and position them so that they looked like your example. All of the credit needs to go to @geoffrey_crofte for being the genius behind the hexagon. I just positioned and resized.

Cheers!

Upvotes: 4

Jake Taylor
Jake Taylor

Reputation: 4336

With the way this CSS is set up you could do a background image in the center but you'd still have gray triangles on your left and right. The code is a little more complicated for a background-image: but check out my fiddle to see how it works http://jsfiddle.net/z9Lo0gmu/

Here's an even more complex example of a hexagon grid: Responsive grid of hexagons

Upvotes: 1

Related Questions