CSSを使った画像変換

Question

画像の上にマウスを置いて拡大したいときは3回、拡大した画像をクリックすると元のサイズに戻ります。これは純粋にCSSでできますか？

ありがとうございました

Answer 1

CSSではクリックがサポートされていません。あなたは

img:hover {transform: scale(300%);} 

とホバーにズームすることができますが、ユーザーが離れる

Answer 2

CSSがイベントをクリックし追跡していないとして、それはすぐに縮小されます。

:hoverを使用して拡大縮小し、:activeを使用して縮小することはできますが、カーソルを移動するとすぐに画像は:hover効果のために拡大されます。

img:hover { 
    transform: scale(1.3); 
} 

img:active { 
    transform: scale(1); 
} 

しかし、これは良い方法ではありません。

Answer 3

は、私はあなたができることを意味、それはかなりではないと私は純粋なCSSでそれをやってお勧めしません：あなたが、少なくとも試みのためにこれをコーディングすることが期待されている

.thing { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.thing label, .thing img { 
 
    transform: scale(0.33); 
 
    transform-origin: 0 0; 
 
    transition: transform .4s; 
 
} 
 
.thing label { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 
.thing input { 
 
    position: absolute; 
 
    visibility: hidden; 
 
} 
 
.thing input:checked ~ img, 
 
.thing input:checked ~ label { 
 
    transform: scale(1); 
 
}

<div class="thing"> 
 
    <input type="checkbox" id="cb"> 
 
    <label for="cb"></label> 
 
    <img src="http://placehold.it/150x150"> 
 
</div>