CSS Animated Side-button-tag

Question

There is a tag trigger on the right side of each line. Some of those tags may contain messages. Initially only an indicator icon is shown and the message is hidden. (I draw the overflow for demonstration, but there may be other methods) When the shown icon is hovered, the whole tag would move to the left and showing the message with a button.

Now here is the problem. Firstly I cannot animate the tag with scalable message length in pure CSS. Secondly since I'm using fixed height for each line, I cannot set the right property for vertical alignment for the message text.

Here is my attempt http://codepen.io/rix/pen/DaGyk.

Answer 1

1. To align the left edge of the message to the right edge of the row regardless of the message length: first position the message absolutely with a right: 50px (since you'd want the left icon to show), then apply a transform: translateX(100%):

.card-item .control {
  position: absolute;
  right: 50px;
  transform: translateX(100%);

  /* other styles... */
}

2. To animate the message on hover: you need to define a transition on .control, then simply transform: translateX(0) on :hover. Also, set right: 0 so that the right edge of the message is flush with the right edge of the row.

.card-item .control {
  position: absolute;
  right: 50px;
  transform: translateX(100%);
  transition: all 0.3s;

  /* other styles... */
}

.card-item .control:hover {
  right: 0;
  transform: translateX(0);
}

3. To vertically align the message text: since you have a fixed height for the message, set the line-height of the message text to the row height which is 50px, and vertical-align: top:

.card-item .control .message {
  /* remove this: margin-top: -8px; */
  line-height: 50px;
  vertical-align: top;
}

http://codepen.io/myajouri/full/jCBiH