1

I am trying to build a responsive grid on a website that will use each hexagon as a link so the "background" method isn't a possibility. I have also taken out the animation for the words coming down and added words onto the image itself. I have also added an opacity to the image that goes away when hovering over.

As this is for an "emergency preparedness" I need to have all of the image in the hexagon, and currently the words are being cut off by the hexagon. I am using this theme http://www.cssscript.com/responsive-hexagon-grid-pure-css/ and so far we've tried the position:absolute/relative method.

Relevant CSS:

.hex {
    position: relative;
    list-style-type: none;
    float: left;
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
}


.hexIn {
display:block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
        transform: skewY(-30deg) rotate(60deg);
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}


.hex img {
    left: -100%;
    right: -100%;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    align-content:center;
    opacity:0.7;
}

.hex img:hover {
    opacity:1.0;
}

Relevant HTML:

<ul id="hexGrid">
<!-- RED ICONS -->
<li class="hex">
<a class="hexIn" href="#">
  <img src="/eng/branch/isb/em/images/EM_EmergencyResponse2.svg" alt="Emergency Response" />
 </a>
</li>

The images are all SVGs for responsive design.

NecromanceRayder
  • 11
  • 3
  • This answer might be useful http://stackoverflow.com/questions/21687326/can-i-make-an-irregular-div-shape-using-only-css (`clip-path`) and also https://sarasoueidan.com/blog/css-shapes/ might be helpful as well. Also, please include your HTML in that Stack Snippet, too. – TylerH Aug 16 '16 at 14:08
  • That looks like it is more for text than images. I'm just trying to make sure all of my image shows up inside the hexagon. – NecromanceRayder Aug 16 '16 at 14:23
  • Ah, the "text being cut off" line threw me off. Can you possibly upload some of the svgs somewhere and post a working demo via Stack Snippet or JSFiddle so we can see your scenario? – TylerH Aug 16 '16 at 15:03
  • Yeah there was a text on the image. I got the results I wanted just by resizing the image a bit, it's still not centered but the content I need is in view. – NecromanceRayder Aug 16 '16 at 16:05
  • Possible duplicate of [Responsive grid of hexagons](https://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons) – TylerH Sep 28 '17 at 20:11

0 Answers0