Больше чем уверен, что многие из вас видели на том или ином блоге, ячейку с полезной информацией, а если быт точным, то ячейку с последними комментариями пользователей и при нажатии стрелкой мыши, фон ячейки менялся или появлялось изображение, а вы могли перейти и посмотреть полный комментарий пользователя, давайте рассмотрим как данную функцию реализовать на html-css.

Для начала, мы создадим основную ячейку див, с классом cell_info, в которую поместим ссылку на нужный нам контент, а ссылки пропишем class="info_if" и параметр onclick="return false;"

а в стилях пропишем отображением содержания блочного элемента, чтобы содержание ячейки не выходила за рамки, пропишем значения для текста и установим значения классу info_i, где пропишем фон до и посл нажатия стрелкой мыши.

а для того, чтобы появилось изображение при на ведении стрелкой мыши на ячейку div, заменим info_i:hover на

Обратите внимания, что я запретил изображения повторяться и прижал его к правому нижнему углу, основной ячейки div.