CSS animated box tag

Question

There is a trigger on the right side of each line. Some of these tags may contain messages. Initially, only the indicator icon and the message are hidden. (I draw an overflow for demonstration, but there may be other methods) When the icon shown hangs, the entire tag moves to the left and displays a message using the button.

Now here is the problem. Firstly, I cannot animate a tag with scalable message length in pure CSS. Secondly, since I use a fixed height for each line, I cannot set the correct property to vertically align the message body.

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

Answer 1

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

 .card-item .control { position: absolute; right: 50px; transform: translateX(100%); /* other styles... */ } 

2. To animate a message on hover: you need to define transition on .control , and then just 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 line.

 .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 height line, 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

Answer 2

In this example, I have a pop-over-part under a card that opens to the right. Change on the right: from -10 to 10 and change in background: the upper left corner should help you. You can play with it.

Save each line as li, and you can give your class li:

 li { text-align: -webkit-match-parent; line-height: 20px; } .pop-over-part { position: absolute; right: -10px; top: 6px; height: 100%; width: 10px; display: inline-block; background-image: url(/assets/icons/tab-x.png); background-repeat: no-repeat; background-position: top right; cursor: pointer; }