css - Blurry text and objects on translate3d -

i'm working on onhover text translate animation.

i've seen responses question on stackoverflow/google, , have tried apply fixes, none of them seem work.

in firefox, it's -moz-transform: translate3d(0,-200px,0);that blurs, in chrome entire time it's blurred.

here's fiddle i'm working on.

option 1

try hexagon 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 bg image on 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: 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 example 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 article 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 article 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 article hexagon leads to</p>      </div>    </li>    </ul>