0

How put inside the class hexagon image for hexagon.. i wanna change background-image on the tag image <img>..

My example: http://codepen.io/anon/pen/ZBzYqp

web-tiki
  • 99,765
  • 32
  • 217
  • 249
TriSTaR
  • 405
  • 3
  • 19
  • 1
    This [responsive grid of hexagons](http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons) uses the `` tag inside the hexagons. – web-tiki Nov 02 '16 at 10:41

3 Answers3

1

.hexagon span {
    position: absolute;
    display: block;
    border-left: 100px solid red;
    border-right: 100px solid red;
    width: 200px;
}

.top {
    top: 0;
    border-bottom: 173px solid transparent;
}

.bottom{
    bottom: 0;
    border-top: 173px solid transparent;
}

.hexagon {
    background: url(http://placekitten.com/400/400/);
    width: 400px;
    height: 346px;
    position: relative;
}
<div class="hexagon pic">
    <span class="top"></span>
    <span class="bottom"></span>
</div>
Purushothaman
  • 358
  • 4
  • 22
1

MY UPDATED Answer according to your required size:

<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://csshexagon.com/img/meow.jpg" alt="" />
                </div>
            </div>
        </div>
    </a>
</div>
</div>

.hexaHolder{
    height: 115px;
    width: 99px;
    float: left;
}
.hexa img{
    width:130%;
    margin-top: -5px;
    margin-left:-50px
}
.hexa, .hexa div {
    margin: 0 auto;
    transform-origin: 50% 50%;
    overflow: hidden;
}
.hexa {
    text-align: center;
    margin: 0;
    width: 270px;
    height: 315px;
}
.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;    
}

Check the Fiddle

Kishore Chandra
  • 596
  • 1
  • 5
  • 21
0

I have even come up with the issue like this. my solutions is below here.

running Fiddle

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://csshexagon.com/img/meow.jpg" 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;    
}
Kishore Chandra
  • 596
  • 1
  • 5
  • 21
  • use http://www.calculator.net/ratio-calculator.html?c2t1=300&c2b1=256&c2type=Enlarge&c2time=2.5&ctype=2&x=50&y=11 – Kishore Chandra Nov 02 '16 at 10:08
  • use Ratio Scaling Calculator in http://www.calculator.net/ratio-calculator.html?c2t1=300&c2b1=256&c2type=Enlarge&c2time=2.5&ctype=2&x=50&y=11 – Kishore Chandra Nov 02 '16 at 10:09
  • I don't know how it's work.. for example i wanna resize you hexagon to width: 270px height: 310px.. can you show in your example? – TriSTaR Nov 02 '16 at 10:13