悬停+活动CSS

Question

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

CSS：

.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;
}

HTML：

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

</div>