Blurry text and objects on translate3d - css

Question

I'm working on an onhover text translate animation.
I've seen most responses to this question on StackOverflow/Google, and have tried to apply all the fixes, but none of them seem to work.
In firefox, it's just the -moz-transform: translate3d(0,-200px,0);that blurs, but in Chrome the entire time it's blurred.
Here's the fiddle I'm working on.

Answer 1

Option 1
Try this hexagon for smoother text
.hexagon {
position: relative;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
background-image: url(https://0.s3.envato.com/files/53859088/Green-Leaf-Texture_01-1_Preview.jpg);
background-size: auto 346.4102px;
background-position: center;
cursor: pointr;
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 212.13px;
height: 212.13px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 43.93px;
}
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 300.0000px;
height: 173.20508075688775px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexTop {
top: -106.0660px;
}
.hexTop:after {
background-position: center top;
}
.hexBottom {
bottom: -106.0660px;
}
.hexBottom:after {
background-position: center bottom;
}
.hexagon:after {
content: "";
position: absolute;
top: 0.0000px;
left: 0;
width: 300.0000px;
height: 173.2051px;
z-index: 2;
background: inherit;
}
.text {
position: absolute;
top: 220px;
left: 80px;
right: 0;
bottom: 0;
font-size: 2.6em;
color: #000;
z-index: 999;
opacity: 0;
transition: all ease 0.6s;
}
.hexagon:hover .text {
opacity: 1;
top: 70px;
}
.hexagon:hover {
background-color: #fff;
}
<div class="hexagon">
<div class="hexTop"></div>
<div class="hexBottom"></div>
<div class="text">Option1</div>
</div>
Option 2
Use this example its responsive
http://codepen.io/web-tiki/pen/HhCyd
body {
font-family: 'Open Sans', arial, sans-serif;
background: #fff;
}
* {
margin: 0;
padding: 0;
}
#categories {
overflow: hidden;
width: 90%;
margin: 0 auto;
}
.clr:after {
content: "";
display: block;
clear: both;
}
#categories li {
position: relative;
list-style-type: none;
width: 27.85714285714286%;
/* = (100-2.5) / 3.5 */
padding-bottom: 32.16760145166612%;
/* = width /0.866 */
float: left;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(3n+2) {
margin: 0 1%;
}
#categories li:nth-child(6n+4) {
margin-left: 0.5%;
}
#categories li:nth-child(6n+4),
#categories li:nth-child(6n+5),
#categories li:nth-child(6n+6) {
margin-top: -6.9285714285%;
margin-bottom: -6.9285714285%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
#categories li * {
position: absolute;
visibility: visible;
}
#categories li > div {
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;
}
/* HEX CONTENT */
#categories li img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
}
#categories div h1,
#categories div p {
width: 90%;
padding: 0 5%;
background-color: #008080;
background-color: rgba(0, 0, 0, 0.5);
font-family: 'Raleway', sans-serif;
-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
-ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}
#categories li h1 {
bottom: 110%;
font-style: italic;
font-weight: normal;
font-size: 1em;
padding-top: 100%;
padding-bottom: 100%;
}
#categories li h1:after {
content: '';
display: block;
position: absolute;
bottom: -1px;
left: 45%;
width: 10%;
text-align: center;
z-index: 1;
border-bottom: 2px solid #fff;
}
#categories li p {
padding-top: 50%;
top: 110%;
padding-bottom: 50%;
}
/* HOVER EFFECT */
#categories li div:hover h1 {
bottom: 50%;
padding-bottom: 10%;
}
#categories li div:hover p {
top: 50%;
padding-top: 10%;
}
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,300,200,100,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
<ul id="categories" class="clr">
<li class="pusher"></li>
<li>
<div>
<img src="https://0.s3.envato.com/files/53859088/Green-Leaf-Texture_01-1_Preview.jpg" alt="" />
<h1>Option 1</h1>
<p>Some sample text about the article this hexagon leads to</p>
</div>
</li>
<li>
<div>
<img src="https://0.s3.envato.com/files/53859088/Green-Leaf-Texture_01-1_Preview.jpg" alt="" />
<h1>Option 2</h1>
<p>Some sample text about the article this hexagon leads to</p>
</div>
</li>
<li>
<div>
<img src="https://0.s3.envato.com/files/53859088/Green-Leaf-Texture_01-1_Preview.jpg" alt="" />
<h1>Option 3</h1>
<p>Some sample text about the article this hexagon leads to</p>
</div>
</li>
</ul>