[分享]css中点击图片显示文字

CSS中可以使用伪类实现在点击图片时显示相关的文字描述。实现方法如下：

//HTML 代码
<div class="container">
    <img src="img.jpg" alt="image" class="img" />
    <p class="desc">这是一张美丽的风景图片。</p>
</div>

//CSS 代码
.container {
    position: relative;
}

.img {
    cursor: pointer;
}

.desc {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 14px;
    text-align: center;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.img:hover + .desc,
.img:focus + .desc {
    top: calc(100% + 10px);
    opacity: 1;
} 

在HTML代码中，我们在一个容器中包含了一个图片和一个描述文字，给图片添加了一个class用于后面的CSS选择器。

CSS中，我们先给容器设定了相对定位，这是为了让绝对定位的描述文字可以根据容器定位。接着我们给图片添加了cursor: pointer属性，当鼠标移动到图片上时，光标会变为手型图标，提醒用户可以点击。

对于描述文字，我们使用了绝对定位并计算了top值为容器高度，这是为了让它可以正好显示在图片下方。同时，我们给描述文字设定了透明度为0，通过添加hover和focus伪类让它在图片被点击或悬停时才显示出来。使用opacity和transition属性实现了渐变动态效果。

综上，以上代码实现了当鼠标在图片上悬停或者点击时，在其下方显示与之相关的文字描述的效果。