CSS
.hexagono {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.imagem1{
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.imagem2{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-image: url(http://i.imgur.com/ZNRZUaQ.png);
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.um {
width: 200px;
height: 250px;
margin: 0 0 0 20px;
}
.dois {
width: 400px;
height: 200px;
margin: 0 0 0 -80px;
}
.tres {
width: 100px;
height: 150px;
margin: 0 0 0 20px;
}
.tres .imagem2 {
/* background-size: cover; */
background-size: 115%;
}
