Css text zoom effect snapping back when hovering

Question

So I am trying to make my headers on a website zoom in on hover. I must be doing something wrong. When I hold the mouse over the text the text is zoomed in (or enlarged if you will) but then it snaps back to the original size again.

I want it to snap back to the original size, but only when I remove the mouse from the text. This should be pretty basic but, I guess I am missing something here.

How can I avoid making the text snap back to the original size when the mouse is over the text?

    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 a {
      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);
    }

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

You can refer with the following link which is already existing http://stackoverflow.com/questions/15757036/creating-a-zoom-effect-on-an-image-on-hover-using-css — Vidya Sagar, Jun 19 '15 at 10:54

score 1 · Accepted Answer · answered Jun 19 '15 at 11:04

1

Just replace this and you will get what you need.

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

Refference Link

answered Jun 19 '15 at 11:04

Leo the lion

3,164
2
22
40

1

Perfect! And thanks for cleaning up the unnecessary lines haha. – Arete Jun 19 '15 at 11:14
@Leo the lion any idea why `transform: scale()` doesn't work on inline elements? – gaynorvader Jun 19 '15 at 11:15
@gaynorvader9 please read this http://stackoverflow.com/questions/29667859/transform-css-property-doesnt-work-with-a-element and you will know why..sorry for link as can't explain in comment..hope you can understand..ty – Leo the lion Jun 19 '15 at 11:29
@Arete glad my answer helped you..:) – Leo the lion Jun 19 '15 at 11:30

score 0 · Answer 2 · answered Jun 19 '15 at 11:03

0

Try this fiddle.

a {
  font - size: 18 px
  font - family: 'Oswald', sans - serif;
  color: #404040;
  text-decoration: none;
  -webkit-transition: color 2s, font-size 2s;
  -moz-transition: color 2s, font-size 2s;
  -o-transition: color 2s, font-size 2s;
  transition: color 2s, font-size 2s;
}
a:hover {
  font-size: 45px;

}

answered Jun 19 '15 at 11:03

stanze

2,456
10
13

Thanks. This seems to sort of work. The only problem is that my text is inside a div and I have more divs below. When the text is enlarged the rest of the content in the div is pushed downwards. Does that make any sense? – Arete Jun 19 '15 at 11:11

Css text zoom effect snapping back when hovering

2 Answers2