CODEWITHSUNDEEP
javascriptjquerycsshtml
iori
iori

Reputation: 3506

How to trigger an animate text when hover on a text/image?

My brand name is: Code

My nav look like this

Code Home | Service | Product | Contact

I want to change Code -> { Code } when users hover on my my brand name.

I want to style the { } to have red color.

I want the { } to slide right in no later than 2 seconds.

Can someone tell me how can I do that in CSS ?

Will I need JS for that due to animation involve ?

Edit

Direction of animate

{<-- Code -->}

Upvotes: 0

Views: 35

Answers (2)

jmore009
jmore009

Reputation: 12933

I would do something like this. You can use CSS's transitions to create some nice effects

<div class="logo">
  <span class="left">{</span>
  Code
  <span class="right">}</span>
</div>

FIDDLE

Upvotes: 2

skv
skv

Reputation: 1803

Here is a fiddle

http://jsfiddle.net/rLdtse86/13/

You use Pseudo elements on hover action

a:hover::before
{
    content:"{";
}

a:hover::after
{
    content:"}";
}

Upvotes: 2

Related Questions