在缩略图的悬停上显示更大的图像 [英] Show bigger image on thumbnail's hover

问题描述

对于图像列表，我有平方缩略图的网址 http://example.com/img1_thumb.jpg 以及原始尺寸（任意比例） http://example.com/img1.jpg 。我在网格中显示缩略图，当用户将鼠标放在网格中的图像上时，我想显示原始缩略图。也许使用浮动元素，目标是用户可以更详细地查看图像并查看缩略图中裁剪的部分。

For a list of images I have the urls for the squared thumbnail http://example.com/img1_thumb.jpg and for the original size (any proportion) http://example.com/img1.jpg. I'm showing the thumbnails in a grid and I'd like to show the original one when the user puts the mouse over a image in the grid. Maybe using a floating element, the target is the user can see the image in more detail and view the parts of the cropped in the thumbnail.

我该怎么办？我是HTML / css / Javascript初学者

How can I do it? I'm a beginner with HTML/css/Javascript

推荐答案

你可以在没有缩略图的情况下工作..

U can work without thumbnails..

缩略图

<img src="http://example.com/img1.jpg" class="compress"/>

暂停上述显示此一个

$(".compress").hover(function(){
  $(".image").show();

});

完整图片

 <img src="http://example.com/img1.jpg" class="image"/>

css

 .compress{
  width:20%;
/*aspect ratio will be maintained*/

}

.image{
display:none;
position:absolute;


 }

它不完整，但我认为它可能会帮助

its not complete,but i think it might help

这篇关于在缩略图的悬停上显示更大的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！