The Web Dev

To make a div vertically scrollable using CSS, we set the overflow-y property.

For instance, we write

<div style="overflow-y: scroll; height: 400px">...</div>

to make the div scrollable vertically with overflow-y: scroll;.

We’ve to set the div’s height for overflow-y to work.

To fix image inside div has extra space below the image with CSS, we make the image a block element.

For instance, we write

img {
  display: block;
}

to make the image a block element with display: block; to remove the space below the image.

To position absolute but relative to parent with CSS, we set the position property.

For instance, we write

#father {
  position: relative;
}

#son1 {
  position: absolute;
  top: 100%;
}

to set the parent element to have relative position with position: relative;.

Then we set the child to have absolute position with position: absolute;, which will position it relative to the parent.

To convert an image to grayscale in HTML/CSS, we set the filter property.

For instance, we write

<img src="https://picsum.photos/30/30" />

to add an img element.

Then we write

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

to set the filter and -webkit-filter property to grayscale(1) to make the image grayscale.

To affect other elements when one element is hovered with CSS, we use the :hover pseudoclass.

For instancne, we write

#container:hover #cube {
  background-color: yellow;
}

to select the element with ID container when we hover over it with #container:hover.

And we select the element with ID cube inside and set its background color to yellow.