Efek Thumbnail hover preview pada image

Testing yek.... berhasil gak.....

• 
• 
• 

<style> .prevthumbhover{ cursor: default;list-style: none;} .prevthumbhover a{ cursor: default;} .prevthumbhover a .preview{ display: none;} .prevthumbhover a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;} .prevthumbhover img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;} .prevthumbhover li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;} .prevthumbhover .preview{ border-color: #000;width: 200px;height: 150px;} </style> <br /> <ul class="prevthumbhover"> <li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi12o3ZsSjeWIEFLy_YYyc0BixWTlWo1yRInPoQDWyurhCTeeuvTHG6DoaWW4ZFE2YWOQ_CeuLHjM6zrKBn0gNtkm_D2QIZbii_HWuZzIi_-ow8CC4GWZMcK0paitRuwWZigyFeeSC7888/s1600/shirt.png"><img alt="T-shirt" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwTfSYL-ULr01UQwG3nY2Es_K1wQwn_wwDbygZjnL_RYdal-zrlH6wNaBJ7CDNlLxiHW6quPeNJIMEZZiPewrwjAVUbaFb59dI1Qr7wwR1ArY0WhTVJrzTw5vTG3Xe82zarjr5-wAB5nU/s1600/shirt.png" /><img alt=" t-shirt" class="preview" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwTfSYL-ULr01UQwG3nY2Es_K1wQwn_wwDbygZjnL_RYdal-zrlH6wNaBJ7CDNlLxiHW6quPeNJIMEZZiPewrwjAVUbaFb59dI1Qr7wwR1ArY0WhTVJrzTw5vTG3Xe82zarjr5-wAB5nU/s1600/shirt.png" /></a></li> <li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5jBh8L2kefYIpYmVFP2wwOq1UUQC3m2X1-A7-h28D7fa0yyxf67KCSC3j8L1nORm7my2LN22nhgFDVIRpBeAHWTig68OfFfyAS9W_Lwrd3llKzD-xrWsVFkXxT-PC1ApJydjyDowuQ6E/s1600/4.png"><img alt="coklat" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMtMNh2u6Lw_knMbdMOUvMwDCkWCtvUj1cK55sGMfOP2HbFuYqGIvAMUdwbssqy-E6YREqQOVoRP-hxhj6aRDV0ayW5x4LxeFU7EiMGICBXcNZCbLmFKv_Nuz6IyrweYRHrftEyCJaxQM/s1600/4.png" /><img alt=" coklat" class="preview" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMtMNh2u6Lw_knMbdMOUvMwDCkWCtvUj1cK55sGMfOP2HbFuYqGIvAMUdwbssqy-E6YREqQOVoRP-hxhj6aRDV0ayW5x4LxeFU7EiMGICBXcNZCbLmFKv_Nuz6IyrweYRHrftEyCJaxQM/s1600/4.png" /></a></li> <li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfvI_R52W1nrun0WrWjwA73vRN2w7O3oSzFpn-6yMgGInibezMYP_C7mrrc2CHCsjCBvPpP3WrsPcJjzDSxpg_7qMDLypSbF-stvKY4GTOZkbwaECsgzSVM2HHWCMK0mdbupuuMKHW_tg/s1600/18.png"><img alt="coklat" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCMDcEFkf-R7lKDgzj5ghQsEtGzwamtlwbIFB9u1fmkiKtRBY5LUx3kl2ZX52JqjRLVFb_XI4-TInuM9HlLxLp-ZhHNCb29NaWM3j8fsSTrXHw5TMRu8XnsvSZrNciEcQtgmCOBkFDcQ/s1600/18.png " /><img alt=" coklat" class="preview" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCMDcEFkf-R7lKDgzj5ghQsEtGzwamtlwbIFB9u1fmkiKtRBY5LUx3kl2ZX52JqjRLVFb_XI4-TInuM9HlLxLp-ZhHNCb29NaWM3j8fsSTrXHw5TMRu8XnsvSZrNciEcQtgmCOBkFDcQ/s1600/18.png " /></a></li> </ul>

Sumber : brugkembar