使用 CSS 单击图像时显示文本

我有一个食物菜单网站，每个食物条目都有图像。它们实际上被复选框标记为图像。当我单击任何菜单图像时，它会显示我使用 CSS 编码的自定义复选框。

除此之外，我还想在我的页面上显示更下方的文本，基本上指定了已检查的食品。因此，如果我选择玉米，我希望"CORN"一词显示在我的 html 页面的另一个部分。

此外，如果随后取消选中该项目，则文本应隐藏。

我最好只使用CSS来做到这一点，但如果不是，我可以使用一些javascript。

这是我所拥有的。我感谢任何帮助。谢谢！

网页代码

<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" />
<label for="checkbox2" class="css-label"><img src="images'cucumber.png"></label>
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" />
<label for="checkbox3" class="css-label"><img src="images'chickpea.png"></label>
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" />
<label for="checkbox4" class="css-label"><img src="images'corn.png"></label>

CSS代码

input[type=checkbox].css-checkbox {
                        position:absolute; z-index:-1000; left:-1000px; overflow:        hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
                    }
                    input[type=checkbox].css-checkbox + label.css-label {
                        padding-left:40px;
                        height:45px; 
                        display:inline-block;
                        line-height:45px;
                        background-repeat:no-repeat;
                        background-position: 0 0;
                        font-size:5px;
                        vertical-align:middle;
                        cursor:pointer;
                        margin-bottom:165px
                    }
                    input[type=checkbox].css-checkbox:checked + label.css-label {
                        background-position: 0 -45px;
                    }
                    label.css-label {
            background-image:url(http://localhost/images/csscheckbox_7cdb0340e1b30df1c5ec1b06aac0dca1.png);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

JSFIDDLE 示例