Hover: a Few Examples of What it Will Do

The "flex-box" example showing a group of very small images lined up across the page stated that a future example would use this lineup of images to show and explain another element that can be used to increase the size of a selected image when the cursor is held over it and then lets it return to its former size when the cursor is moved away. "Hover" can also be used to produce many other results including showing a different image or showing text explaing the image. The style statements used for this are:
.example1 {width: 100px; height: 100px; z-index: +1;}
(We will use hover with the images, each of which belongs to the class, example1. Z-index tells an element whether it should go behind or in front of other items. If the z-indexes of two overlapping elements are the same, they will appear to compete for the space. The default z-index is zero (0).
.example1 a img {width: 100px; height: auto;}
.example1 a:hover img {padding-top: 200px; margin-left: -100px; width: 300px; height: auto;}
(Taken in reverse order, this tells the image to expand from its 100-pixel width to 300 pixels with a height to keep it properly proportioned. It is to drop down so that the top of the div, or holding box, is 200 pixels below the top of the smaller image box.)
.testbox {display: flex; flex-wrap: wrap; background-color: transparent;}
(No difference from the images styling for the simple example except for the class having a different name. Names given to classes are rather arbitrary.)
.testbox > div {background-color: transparent; width: 100px; height: 100px; margin: 0;}

The "Demo" example showed a windmill that appeared only when the cursor was hovered over the word windmill, just as here. The styling and HTML code for this is fairly simple once the hover concept has been introduced. The style is:
.hide-show a img {height: 0; width: 0; border-width: 0;} The names mud and swamp will work as well as hide-show for the class, bit I believe it is good to pick something appeals to you or a word that reminds you of its function.
.hide-show a:hover img {position: fixed; top: 200px; left: 10px; width: 400px; height: auto;}, and
HTML is:
<span class= "hide-show"><a href= ""><img src= "windmill.gif" width= 150%;>windmill</a></span>

Important note: if you attempted to look at and work through this example on a small-screen device with a touch screen, you noted that hover doesn't work well without a cursor, which most small-screen devices lack. Some later examples that address styling pages that work on both large screens and small will discuss a work-around that can sometimes be used to replace hover on touch screens.