CODEWITHSUNDEEP
htmlcss
tinyCoder
tinyCoder

Reputation: 360

hexagons with image inside

I am trying to create a CSS/HTML version of this image below, trying to make every hexagon shape a clickable element that opens a popup to describe the content of the clicked item

I used Hexagon Generator to create my elements, but I couldn't manage to order them in the way they should be / or similar, according to this image. (Main image in the middle and hexagons around it)

And making the whole thing responsive (mobile-ready), that's another problem.

enter image description here

Upvotes: 1

Views: 2342

Answers (1)

user3668347
user3668347

Reputation:

This is in no way an optimized solution, and I can probably create something much better, but I wanted you to take a look at one of the ways this can be done.

HTML

<div class="hex">
  <div class="hex-title">
    Simple title
  </div>
  <div class="hex-hide"></div>
  <div class="hex-img">
     <img src="https://cdn.stocksnap.io/img-thumbs/960w/Q7STENMU1K.jpg">
  </div>
</div>

CSS

.hex{
  width:300px;
  height:300px;
  margin:50px auto;
  position:relative;
}
.hex:before{
  content:"";
  position:absolute;
  width:0;height:0;
  border:80px solid transparent;
  border-top:0px solid #fff;
  border-left:145px solid #fff;
  top:0;
  left:0;
  z-index:9999;
}
.hex:after{
  content:"";
  position:absolute;
  width:0;height:0;
  border:80px solid transparent;
  border-top:0px solid #fff;
  border-right:145px solid #fff;
  top:0;
  right:0;
  z-index:9999;
}
.hex-title{
  width:105%;
  height:40px;
  background:#005A87;
  position:absolute;
  margin:auto;
  left:-2.5%;top:0;bottom:0;
  z-index:99999999999;
  font-family:Arial;
  font-size:14px;
  color:#fff;
  line-height:40px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:2px;
}
.hex-img{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
}
.hex-img img{
  max-height:100%;
}
.hex-hide{
  width:100%;
  height:100%;
  position:absolute;
  top:0;left:0;
}
.hex-hide:before{
  content:"";
  position:absolute;
  width:0;height:0;
  border:80px solid transparent;
  border-bottom:0px solid #fff;
  border-left:145px solid #fff;
  bottom:0;
  left:0;
  z-index:9999;
}
.hex-hide:after{
  content:"";
  position:absolute;
  width:0;height:0;
  border:80px solid transparent;
  border-bottom:0px solid #fff;
  border-right:145px solid #fff;
  bottom:0;
  right:0;
  z-index:9999;
}

Demo: https://jsfiddle.net/j74padnq/

And this is a demo that resembles the image that was posted, albeit with less details: https://jsfiddle.net/j74padnq/1/

Upvotes: 4

Related Questions