How to make a card (updated)?

How to make hidden content that is displayed when you hover over the item, was visually one with this card?
Example 1.
Example 2.
The solution should be as flexible as possible:
  1. The card must not be fixed height, as in example 1.
  2. The card has a shadow, therefore should pay attention to the fact that the additional content was connected with the main seamless.

That's how come I have (used example 2), but then when you hover at the point of contact shadows visible seam.
March 12th 20 at 08:05
2 answers
March 12th 20 at 08:07
a :hover everything. htmlbook.ru/CSS/hover
Updated the question. - carroll48 commented on March 12th 20 at 08:10
March 12th 20 at 08:09
A little thought and it seems to have solved your problem:
the decision
@ashly.Okune, thanks for trying, but you have a card with a fixed height, and I would like to avoid it. - carroll48 commented on March 12th 20 at 08:12
@carroll48, but you can a screenshot of the layout? Don't really understand what should in the end get. The height is fixed only on the parent unit, the hidden can be any number of content to drive

5bc9ef946c0d0334047359.png5bc9efab3ea2e661145497.png

The parent units will also be a different height? - ashly.Okune commented on March 12th 20 at 08:15
@ashly.Okune, see the examples that I did. Visually it should be the same card product, but with a more flexible implementation (without specifying the height of the card and make it look coherent). - carroll48 commented on March 12th 20 at 08:18
Judging by your profile, you know about js. If you need maximum flexibility, you will have to resort to it. First, so nice to have dies of different sizes

5bcefae44a3ab196186155.png

Let's say you use such a plugin. At the output of each die will be a certain height in pixels, have everything that you will need to use the layout that I proposed above (maybe with some changes) - ashly.Okune commented on March 12th 20 at 08:21

Find more questions by tags LayoutCSS