question

it basically just changes style attributes of an image (or any element) on hover.

take this example:

img {
    height: 300px;
    transition: 0.1s;
}

img:hover {
    height: 400px;
}

what this short code does is the following:
- first, it sets image height to 300px, very simple
- then it sets a "transition" attribute. this is very important as it defines the time of transition when an attribute is modified. without it, any change would happen instantly.
- after the starting conditions have been defined, the onhover condition (defined through the separate attribute tag :hover) are defined.
- i've set it to just make the image 100px taller, or 400px, on hover.

you can do this on pretty any attribute of any element, whether it be setting the opacity of an image overlay or changing the color of some text.