Blurred text and objects on translate3d

Question

I am working on cast animation in onhover.

I saw most of the answers to this question on StackOverflow / Google and tried to apply all the fixes, but none of them seem to work.

In firefox, it's just -moz-transform: translate3d(0,-200px,0);that that gets blurry, but in Chrome, it's blurry all the time.

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>

Run codeHide result

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>

Run codeHide result