1

I am trying to create a nested hexagons in css with background images. I have 3 outer hexagons with float left. Each outer hexagon contains two inner hexagons. One inner hexagon will be show at a time.

When I hover outer hexagon, first inner hexagon will translate X to 150% and it will be hidden and then second inner hexagon will translate X 0 from -150% and it will be shown. The problem is when I hover certain places in first outer hexagon, second outer hexagon hover being applied.

How to solve this?

HTML:

<div class="skillhex">
    <div class="inhex1">
        <div class="inhex2">
            <div class="headhex">
                <div class="inhex1">
                    <div class="inhex2 bg1"></div>
                </div>
            </div>
            <div class="tailhex">
                <div class="inhex1">
                    <div class="inhex2 bg2"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="skillhex">
    <div class="inhex1">
        <div class="inhex2">
            <div class="headhex">
                <div class="inhex1">
                    <div class="inhex2 bg1"></div>
                </div>
            </div>
            <div class="tailhex">
                <div class="inhex1">
                    <div class="inhex2 bg2"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="skillhex">
    <div class="inhex1">
        <div class="inhex2">
            <div class="headhex">
                <div class="inhex1">
                    <div class="inhex2 bg1"></div>
                </div>
            </div>
            <div class="tailhex">
                <div class="inhex1">
                    <div class="inhex2 bg2"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.skillhex {
    width: 100px;
    height: 200px;
    background-color: yellow;
    overflow: hidden;
    visibility: hidden;
    position: relative;
    -webkit-backface-visibility: hidden;
    transform: rotate(120deg);
    float:left;
}
.inhex1 {
    width: 100%;
    height: 100%;
    background-color: orange;
    transform: rotate(-60deg);
    overflow: hidden;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.inhex2 {
    width: 100%;
    height: 100%;
    background-color: yellowgreen;
    visibility: visible;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotate(-60deg);
}
.headhex, .tailhex {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(120deg);
}
.headhex {
}
.tailhex {
    transform: translate(-150%);
}
.skillhex:hover .headhex {
    transform: translate(150%);
    transition-duration: 1s;
}
.skillhex:hover .tailhex {
    transform: translate(0%) rotate(120deg);
    transition-duration: 1s;
}
.bg1 {
    background-image: url(http://www.sciencekids.co.nz/images/pictures/math/number1.jpg) !important;
    background-size: cover;
    background-position: center;
}
.bg2 {
    background-image: url(http://www.getdownintwo.com/wp-content/uploads/2013/06/2-graphic.png);
    background-size: contain;
    background-position: center;
}

Demo

Martin Braun
  • 10,906
  • 9
  • 64
  • 105
cJ_
  • 486
  • 1
  • 4
  • 19
  • You should provide your code in the question, if link is dead, your question won't be useful to future visitors, hence I close voted your question because you acted smart by highlighting the fiddle link – Mr. Alien Jul 23 '14 at 06:14
  • Also, I don't get how the tags are relevant in ANY way to your question – Mr. Alien Jul 23 '14 at 06:15
  • @Mr.Alien. I am sorry. i am trying to insert jsfiddle link but it always show error. any help on to post jsfiddle link will be helpfull. JSFiddle link is working.. – cJ_ Jul 23 '14 at 07:10
  • It looks like the two images are larger than the hexagonal mask. If you were to cut down the images so they were the exact width of the hexagon you will reduce problems. You might also need to play with the z-order of the various divs. – Salix alba Jul 23 '14 at 07:10
  • I only set background images and its parent to overflow hidden. Problem only occurs in chrome but not in firefox... what to do... – cJ_ Jul 23 '14 at 07:14
  • You can check this answer : http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons-with-img-tag/26116497#26116497 the hexagons don't have the same orientation but the technique used keeps the boundaries of the hexagons for the hover state and click event. – web-tiki Dec 03 '14 at 09:10

0 Answers0