Есть картинка, при клике на нее, она увеличивается и сохраняет свои размеры до тех пор, пока на ней курсор мыши.
Скорее всего это можно сделать с помощью псевдоклассов :hover и :active, но правильно сделать не получается(

Вот как решалась данная задача:

<div class="block">
<div class="block1" ></div>
<div class="block2" ></div>
</div>

CSS

.block1{
width: 300px;
height: 300px;
background-image: url(1.png);
background-size: 100%;
display: none;
}

.block2{
width: 200px;
height: 200px;
background-image: url(1.png);
background-size: 100%;
}

.block:active .block1{
display: block;
}

.block:active .block2{
display: none;
}

.block1:hover{
display: block;
}

.block1:hover + .block2{
display: none;
}