CODEWITHSUNDEEP
htmlcsscss-transitions
Jeremy
Jeremy

Reputation: 312

CSS Arrow Opacity Transition

How do I take the CSS arrows I have (see below) and make them fade in and out when you hover over each item?

My CSS:

#menu li {
  position:relative;
}

#menu li a:after {
  content: " .";
  display: block;
  text-indent: -99em;
  border-bottom: 0.6em solid #1c525a;
  border-left: 0.6em solid transparent;
  border-right: 0.6em solid transparent;
  border-top: none;
  height: 0px;
  margin-left: -.6em;
  margin-right: auto;
  margin-top: -7px;
  position: absolute;
  left: 50%;
  width: 1px;
}

All the code is available in a jsFiddle.

Upvotes: 0

Views: 863

Answers (1)

Jeremy
Jeremy

Reputation: 312

To accomplish this I added the following:

#menu li a:after {
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

#menu li:hover a:after {
  border-bottom: 0.6em solid #1c525a;
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

See the jsFiddle - I'm sure this code can be cleaned up or bested, but I didn't find an example/answer of this on Stack Overflow yet so I thought I would add this.

Upvotes: 1

Related Questions