Pseudo-Classes/Transitions
What line of CSS code would move an HTML element 20 pixels to the right?
transform: translate(20px, 0);
Which rgba value will show up darkest:
rgba(0,0,0,0.2)rgba(0,0,0,0.8)
Which CSS property allows an element to stick to the screen and ignore scrolling?
position: fixed
The default z-index of an element is usually _____.
0 (auto)
Which position type is always relative to the "Viewport" (the browser window)?
fixed
A "pseudo-class" that detects when the user's mouse cursor is placed over an element.
:hover
What property do we change in order to make sure the most important part of our image is not cropped out?
background-position: center;
position: sticky acts like a mix of which two other positions?
Relative and Fixed
Which position property best describes the following real world analogy?
A reserved seat in a theater (even if you get up, no one takes it).
position: relative
You are trying to use a z-index to make a popup window appear over your text, but the z-index isn't working. The element is currently in position: static. What must you do to fix it?
Set a position property other than static.
What transform value makes an element grow 10% larger than its original size?
scale(1.1)
If you are making a travel card, which background-size is best to ensure there are no empty white spaces inside the card?
background-size: cover;
Which property creates a "new context" (or anchor point) for an absolute child element?
position: relative on the parent.
You wrote the code below to put a "Sale" badge on a product card, but the badge flew to the top left of the entire website. What code is missing from the .card?
.card {
____________________
}
.badge {
position: absolute;
top: 0;
left: 0;
position: relative;
When you use position: absolute, what happens to the space the element used to occupy?
It collapses and other elements fill the gap.
Name 3 different transformations (or ways we can transform elements) that we have learned about in CSS.
scale
rotate
translate
What gradient creates a "Shadow from the top down"?
(give the entire line)
linear-gradient(to bottom, black, transparent)
Which position property is the following real world analogy referencing?
A sticker on a specific postcard.
position: absolute
You are building a messaging app. You want the "Send Message" input box to always be visible at the very bottom of the phone screen, even if the conversation history is very long and the user scrolls up to read old messages.
Which position do you use and why?
position: fixed
Want the input box to remain anchored to the viewport (screen) regardless of the scroll position of the message list.
If 2 elements have position: absolute and occupy the exact same space, but neither has a z-index defined, which one appears on top?
The element that appears later (further down) in the HTML code will appear on top.
The following code would do what when a user hovers over the element, and how fast would it happen?
.potion-bottle {
width: 100px;
background-color: blue;
transition: width 2s ease-in-out;
}
.potion-bottle:hover {The background color will instantly change from blue to purple.
The width will change smoothly, over the course of 2 seconds, from 100px to 200px.
Give the correct order for the stack that correctly creates an image that zooms behind text, and an overlay that gets darker.
Start your list at with which item should be on the bottom and end with which item should be at the top.
1. The background image
2. The gradient overlay
3. The text
You set a header to position: fixed and top: 0. Suddenly, the paragraph text at the top of your page disappears behind the header.
Why did the text move up?
It removes the element from document flow.
The space it occupied collapses causing subsequent elements (the text) to shift up to the top of the container, effectively sliding underneath the fixed header.
A client wants a website where the background image stays perfectly still while the text content scrolls over it like a sheet of paper sliding over a table.
1. Which HTML element gets the background image?
2. Which position and background-size property would you apply to that background?
3. What z-index considerations do you need for the text content?
1. Container (like body or a div)
2. position: fixed
background-size: cover;
3. z-index: -1; (background element)
Main content container (which holds the text) set to position: relative; z-index: 1;
You are reviewing a classmate's code. They made a cool hero image with position: fixed that covers the whole screen.
However, you can't scroll down to see the rest of the website. The scrollbar is gone.
Why did fixed cause this, and how would you redesign it if they still want that image to stay there?
position: fixed takes the element out of flow.
If the image is the only thing with height (or covers everything else) the browser doesn't see scrollable content "behind" it, so no scrollbar is generated.
The Fix:
position: fixed; z-index: -1; to background image.
Put the website content in a div container that has height and a z-index of 1, creating the scrollable area.