Html 悬停+；活动CSS

我有4张图片。当您在图像上移动（：悬停）时，它们会缩放并变亮。当您将光标悬停在图像上时，也会显示光标。如果单击图像，图像将消失，文本将出现。我的问题是，文本在我单击图像后仍然保留。但是文本必须消失，图像必须恢复。我只使用CSS。是否有方法在图像不活动时恢复图像

CSS:

HTML:

谁在单击按钮时将

类设置为活动类？在单击文本时还原类。按钮是什么意思？
.pic > .back{
display:none;
}

.pic:active > .back {
display: block;

}

.pic:active> .front{
display:none;

}
.pic:hover{
opacity: 1;
-webkit-transform: scale(1.05,1.07);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1.05,1.07);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
cursor: pointer;
}

<div class="pic">
<div class="front">
    <img src="jeanrover.png" alt="Jean Rover Pic"/>
</div>
<div class="back">
    <?php jeanRover(); ?>
</div>

</div>