イメージホバーにルーラーを表示してズームしてください

Question

私は、医師（ユーザー）が他の医師（専門家）にECGを送信できる医療システムを構築しています。このECG（JPG画像）を確認するには、ECGの「線」に「変更」があるかどうかをチェックするルーラが必要です。

アンECGイメージだからこの>http://cdn.lifeinthefastlane.com/wp-content/uploads/2009/09/ecg_brugada_001.jpg

ようなもので、私は、ユーザーが画像をホバーされたときに達成しようとしている基本的に何を、私はそれを20％以上にズームしても、彼を助けるために定規を表示する必要があります彼の分析をする。

私はインターネット上で探していたと私は他のシステムに似た何かを見つけることができませんでした:(

誰かが、私は定規について知らない

Answer 1

!!おかげ？どのように私はこれを達成することができますアイデアを持っています私はHTML

ホバー上の画像のズームについてのあなたのアイデアを与えることができ

<div class="item"> 
    <img src="path_to_image" alt="pepsi" width="540" height="548"> 

</div> 

CSS3

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 

.item { 
    position: relative; 

    border: 1px solid #333; 
    margin: 2%; 
    overflow: hidden; 
    width: 540px; 
} 
.item img { 
    max-width: 100%; 

    -moz-transition: all 0.3s; 
    -webkit-transition: all 0.3s; 
    transition: all 0.3s; 
} 
.item:hover img { 
    -moz-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
} 

私はそれが助けを願っています！