CODEWITHSUNDEEP
csscss-transitions
Boiethios
Boiethios

Reputation: 42749

The background of the parent does not transition (slide)

I would like to have a transition effect when I hover a link. I want a text to smoothly appear after the link.

That is what I have so far:

p {
    border-radius: 1em;
    padding: 0.5em;
    background-color: chocolate;
    display: inline-block;
    width: auto;
    transition: width 1s;
}

p>span {
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    transition: all 1s;
}

p:hover>span {
    max-width: 100%;
}
<p>
  <a href="mailto:[email protected]">@</a>
  <span>[email protected]</div>
</p>

As you see, the text appears with a slide effect, but that does not work for the background of the parent. How can I make slide the background too?

Upvotes: 1

Views: 35

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157314

Multiple issues in your code. I'll list them down.

  1. Closing div tag but I don't see any opening div tag.
  2. You are setting a width on p and span both, but just one is required.
  3. You are not turning the entire mailto: in a link, but just the @ which I think is a bad UX. Not sure if this is by design.

I've modified your code a bit, so that it animates the background too, along with the email.

If you do not want the entire email as a URL, just move out the span and put it besides the a tag, rest should work as expected.

p {
  border-radius: 1em;
  padding: 0.5em;
  background-color: chocolate;
  display: inline-block;
  transition: all 1s;
  overflow: hidden;
  max-width: 15px;
  white-space: nowrap;
}

p:hover {
  max-width: 100%;
}

p span {
  margin-left: 8px;
}
<p>
  <a href="mailto:[email protected]">@<span>[email protected]</span></a>
</p>

Upvotes: 1

Related Questions