pseudo ::before ::after title & hover demo

The demo  learned from Kevin Powell.

Title

html

css

The decorate line will keep around the title when the browser resizes.
position:absolute  keep relative position to the title.
.title::before  the background of the title layer down the h1.
.title::after   the line around the title which should be 100 view width of screen and centered [left:50%;transform:translateX(-50%);].

hover image

html

The card contains an image and some description in the card-text.

css1

 The container aligned in the center with flex.
::before and ::after relative to .card.
::before ---the top and bottom line scale in the X axis with animation.
::after---the left and right line scale in the Y axis with animation.

css2

When hovered in the card,the opacity of images change,and the card-text shows up in the middle of the card.