■下記商品ページのPC用販売説明文上部のように画像にマウスをかざすと、
「画像をクリックして拡大イメージを表示」と表示するにはどのように記述すれば良いですか。
アドバイス頂けないでしょうか。

https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/

◎下記の様に記述したところ、レイアウトは同じになりましたが、
画像の拡大機能が作動しないようです。

<style type="text/css">
ul.item_photo {
width: 780px;
height: auto;
margin: 0 0 0 -25px;
padding: 20px 0 30px 0;
overflow: hidden;
list-style: none;
}
ul.item_photo li {
width: 343px;
height: 343px;
margin: 0 0 30px 25px;
padding: 10px;
float: left;
border: #EFEFEF solid 1px;
box-shadow: 0px 0px 3px #CCC;
-moz-box-shadow: 0px 0px 3px #CCC;　/* Firefox用 */
-webkit-box-shadow: 0px 0px 3px #CCC;　/* Safari,Google Chrome用 */
}
ul.item_photo li a img {
width: 100%;
border: none;
}
</style>
<ul class="item_photo"><li><img src="https://image.rakuten.co.jp/店舗url/cabinet/item19/商品ID-1.jpg" width="340"></li><li><img src="https://image.rakuten.co.jp/店舗url/cabinet/item19/商品ID-2.jpg" width="340"></li><li><img src="https://image.rakuten.co.jp/店舗url/cabinet/item19/商品ID-3.jpg" width="340"></li><li><img src="https://image.rakuten.co.jp/店舗url/cabinet/item19/商品ID-4.jpg" width="340"></li><li><img src="https://image.rakuten.co.jp/店舗url/cabinet/item19/商品ID-5.jpg" width="340"></li><li><img src="https://image.rakuten.co.jp/店舗url/cabinet/item19/商品ID-6.jpg" width="340"></li></ul>

<div style="display: none;" id="rakutenLimitedId_ImageExp-photos" class="rakutenLimitedId_ImageExp"></div><div src="https://thumbnail.image.rakuten.co.jp/@0_mall/店舗url/cabinet/item19/商品ID-1.jpg"></div><div src="https://thumbnail.image.rakuten.co.jp/@0_mall/店舗url/cabinet/item19/商品ID-2.jpg"></div><div src="https://thumbnail.image.rakuten.co.jp/@0_mall/店舗url/cabinet/item19/商品ID-3.jpg"></div><div src="https://thumbnail.image.rakuten.co.jp/@0_mall/店舗url/cabinet/item19/商品ID-4.jpg"></div><div src="https://thumbnail.image.rakuten.co.jp/@0_mall/店舗url/cabinet/item19/商品ID-5.jpg"></div><div src="https://thumbnail.image.rakuten.co.jp/@0_mall/店舗url/cabinet/item19/商品ID-6.jpg"></div>