The idea here is to display some text below the image when you cursor over the image. The idea for this can be found in the video at https://helpx.adobe.com/dreamweaver/atv/cs6-tutorials/using-the-css-transitions-panel.html although the code here may be a little different.

Revised: November 8, 2017

Students

This text is displayed when you cursor over the image and disappears when you move off the image. The image and the text are within a section tag (other tags would work as well) to which a class has been applied. The class specifies the height and width of the section. The height of the section is set equal to the height of the image. However, the text would still display as overflow, except that overflow:hidden is also specified for the class, and thus the overflow over the specified height will not initially display.

The hover pseudo-class is applied to the class so when one cursors over the section (the image), the height is increased to 500px and the value of the overflow property is changed to visible (which is the default). The transition specifies that this change will occur over 2 seconds.

However, the text appears all at once, but when you cursor off, it disappears over the period of time specified in the transtion.