html - Css text zoom effect snapping back when hovering -

so trying make headers on website zoom in on hover. must doing wrong. when hold mouse on text text zoomed in (or enlarged if will) snaps original size again.

i want snap original size, when remove mouse text. should pretty basic but, guess missing here.

how can avoid making text snap original size when mouse on text?

preview: http://codepen.io/nine09/pen/pjwwwg

html:

<h1 class="entry-title"> <a href="http://www.google.com" rel="bookmark">this sample text</a> </h1> 

css:

h1, h2, h3, h4, h5, h6 {   clear: both;   font-family: 'oswald', sans-serif;   font-weight: 400;   line-height: 1.2;   margin-bottom: 3%; }  h1 {   font-size: 50px; /*originally 50px*/ }  .entry-title {   font-family: 'oswald', sans-serif;   font-size: 43px; /*originally 80px*/   font-weight: 700;   letter-spacing: -1px;   line-height: 1.1;   margin-bottom: 0%; } @media (max-width: 768px) {   .entry-title {     font-size: 50px;     margin-bottom: 20px;   } } .entry-title {   font-family: 'oswald', sans-serif;   color: #404040;   text-decoration: none;   -moz-transition:-moz-transform 0.2s ease-in;    -webkit-transition:-webkit-transform 0.2s ease-in;    -o-transition:-o-transform 0.2s ease-in;   -moz-transition:-moz-transform 0.2s ease-out;    -webkit-transition:-webkit-transform 0.2s ease-out;    -o-transition:-o-transform 0.2s ease-out; } .entry-title a:hover {   font-family: 'oswald', sans-serif;   color: #000000;   text-shadow:1px 0px #555;   -moz-transform:scale(1.03);    -webkit-transform:scale(1.03);   -o-transform:scale(1.03); } 

just replace , need.

.entry-title {   font-family: 'oswald', sans-serif;   color: #404040;   display: inline-block;   transition: .5s ease; } 

refference link