在圖像懸停時顯示標尺並對其進行縮放

Question

我正在建立一個醫療系統，醫生（用戶）可以將ECG（心電圖）發送給其他醫生（專家），然后再進行檢查，以幫助他們。 要查看此ECG（這是JPG圖像），他們需要一個標尺來檢查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);
}

我希望這會有所幫助！