CODEWITHSUNDEEP
javascripthtmlcsshover
mikus andi
mikus andi

Reputation: 65

Making text larger in CSS using ":hover" and making it revert to it's smaller (initial state)

Let me explain what I'm trying to achieve.

I have text on my website that I want to make LARGER when the user mouses over and SMALLER when the user leaves the hover.

The problem is when I make it larger like so using the :hover method in CSS I can't revert back to it's previous (initial) state afterwards.

#sname{
    margin-top: 100px;
    margin-bottom: 100px;
    color: rgba(1,1,1,0.7);
}

#sname a{
    font-weight: bold;
    font-size: 4em;
}

#sname a:hover{
    font-size:88px;
    transition: all 500ms;
    font-size-adjust: 20px;

}

I'm kinda stuck, I've tried not:(:hover) but it doesn't do anything, and I've also used :onmouseleave

This is a website for a college project, my work is mostly completed (Had to link it to a DB) but I just want to make it look nicer through CSS, I'd use javascript but have little knowledge of how it works.

Thanks.

Upvotes: 1

Views: 20079

Answers (2)

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

Your code works, you just need to move the transition to the initial a state and close the brackets in your css :)

#sname {
  margin-top: 100px;
  margin-bottom: 100px;
  color: rgba(1, 1, 1, 0.7);
}
#sname a {
  font-weight: bold;
  font-size: 4em;
  transition: all 500ms;
}
#sname a:hover {
  font-size: 88px;
  font-size-adjust: 20px;
}
<div id="sname">
  <a href="#">IT WORKS</a>
</div>

Upvotes: 1

Rhumborl
Rhumborl

Reputation: 16609

You just need to add the transition to #sname a (and close the css block):

#sname {
    margin-top: 100px;
    margin-bottom: 100px;
    color: rgba(1,1,1,0.7);
}

#sname a {
    font-weight: bold;
    font-size: 4em;
    transition: all 500ms;
}
    
#sname a:hover {
    font-size:88px;
    font-size-adjust: 20px;
}
<div id="sname">
    <a href="#">test</a>
</div>

Upvotes: 7

Related Questions