Card Title
Some generic text for this card
TEST FiLE 1
Tried the ::before / ::after but didn't work and got the same effect with much less code. Not tried to get this working below 1200px (the container max-width).
Counter-reset.
The counter-reset is set at the .content level. This means the counter will keep adding one to every h2
element within div.content
Vel ratione nobis recusandae! Velit a minima molestiae inventore maiores ab magnam veniam quasi in. Illo tempora distinctio veniam accusantium facere.
Sed quo laboriosam consequatur, itaque beatae ab.
Nulla, porro? Commodi facilis aliquam labore blanditiis error. Porro optio id consequatur voluptate ea debitis provident accusamus dolorum. Incidunt, exercitationem iure.
Nisi ad quam eos, placeat quia illo!
Illum excepturi quas dignissimos quam velit eveniet earum, molestias deserunt corporis, enim nulla aut odio. Sunt, vel excepturi! Sed, rem nihil!
Nobis voluptate, deserunt aut quasi consequatur dolores.
Dolore excepturi voluptatem minus velit magni dolores consequatur aperiam. Tempore nemo nisi aspernatur natus perferendis illum explicabo commodi laudantium nulla dolores!
In perspiciatis ipsam odio! Obcaecati, reprehenderit sit.
Neque totam dolorem optio mollitia a sapiente magnam eius nobis rerum fugiat animi sequi eum expedita facilis, incidunt aspernatur doloremque fuga.
Biscuit test
Paragraph. Will the counter begin again or not?
Cards
Card Title
Basic hover / opacity effect
So this was my own effort just trying some stuff out first. It's not too complicated. Rather than use the img tag though I put the image in the background.
This adds to the first effect. This uses ::before to add the expanding box. This pseudo element is positioned absolutely. The transform: scale(0, 1) is used to scale one axis down to zero then on hover scale(1, 1) expands that one axis
An important thing to remember when using :hover effects is that you can put the hover on the parent yet still target the child: .parent:hover .child.
I also used z-index values. First for the expanding ::before box which I think was below the image maybe. But then the box was above the text so I added a z-index value to that too so it was above the box.
Simple hover effect usingtranform: scale() and translate()
In these effects the ::beforeelement is useful to keep separate from the text. If they're not separate it's difficult/impossibe to vertically align the text.
This effect uses ::before, absolutely positioned at bottom left, to create a 3px high rectangle. It uses transform: scaleX(0) to reduce its size on the X (horizontal) axis to zero. It also uses transform-origin: left to start from the left rather than the centre.
The second link has it's transform-origin set to right in the ordinary state but then transform-origin: left; for the hover state.
The z-index stacking order can change when the parent is given a z-index value. Here the ::before element is given a z-index value of -1 which pushes it below the text but also right to the back. The parent button is then give a z-index value of 1. When this happens a new stacking context is formed and the first, -1, value is now within the value of the parent, +1, button. This means the ::before can now not go behind the button since it lives within the button. See video.
transition-delay
While the body text goes here. Not much more to say at this point. Let's see what happens.
These effects are from Kevin Powell. See video below.
Random Unsplash Images
The images here are from unsplash.com. They are random images of whatever size you set. All you have to add to your image source is: src="//unsplash.it/400/400" where the first 400 is 400 pixels in width and the second the height.
Both images here are the same but it's possible to change that. One hacky way is to change the dimensions very slighty to say 399/399. That seemed to work for Kevin Powell in his video. You can also reference specific images. Go to unsplash.it aka picsum.photos.