HTML图像库使用缩略图更改较大图像

我希望这样，当用户悬停在缩略图上或单击缩略图时，它会使其成为更大的图像。我环顾四周寻找答案，但似乎什么都不适合我（我尝试了JQuery、css），下面是我的代码：

正文{
填充：0；
保证金：0；
}
#活跃的{
背景色：#27629f；
}
#活动：悬停{
背景色：#27629f；
}
.主集装箱{
保证金：0自动；
填充：0；
宽度：100%；
最大宽度：860像素；
高度：3000px；
背景：#27629f；
位置：相对位置；
}
.TXT容器{
保证金：0自动；
填充：0；
宽度：99%；
文本对齐：居中；
}
.imgContainer{
保证金：0自动；
填充：0；
宽度：800px；
文本对齐：居中；
}
.txtp{
字体系列：“世纪哥特式”、“verdana”，无衬线；
字体大小：20px；
颜色：#e0ebff；
}
.TXT货柜标题{
字体系列：“世纪哥特式”、“verdana”，无衬线；
字号：26px；
颜色：白色；
}
.画廊{
}
李先生画廊{
列表样式：无；
}
.画廊图片{
浮动：左；
保证金：5px；
左侧填充：4px；
边框：1px纯黑；
}
1.厨房标题{
字体大小：20px；
字体系列：“世纪哥特式”、“verdana”，无衬线；
颜色：白色；
保证金：0；
填充：0；
}
/*--------------------导航条在下面------------------*/
.导航{
}
美国海军{
列表样式：无；
背景色：#3b6da1；
文本对齐：居中；
填充：0；
保证金：0；
}
李国荣先生{
字体系列：“世纪哥特式”、“verdana”，无衬线；
字体大小：16px；
线高：40px；
高度：40px；
边框底部：1px实心#2e4c6c；
}
.导航a{
文字装饰：无；
颜色：#fff；
显示：块；
过渡：.3s立方贝塞尔（.47、.28、.36、.67）；
}
.导航a:悬停{
z指数：2；
背景色：#034995；
}
.导航a.激活{
背景色：#fff；
颜色：#444；
游标：默认值；
}
@媒体屏幕和屏幕（最小宽度：700px）{
/*这会更改设置，以便更适合较大的监视器*/
李国荣先生{
宽度：175px；/*将获得此重新选择的导航按钮总数除以最小宽度*/
边框底部：无；
高度：50px；
线高：50px；
字号：18px；
}
/*向左浮动，所以若屏幕大于600px，看起来就不好笑了*/
李国荣先生{
浮动：左；
}
/*修复彩色背景*/
美国海军{
溢出：自动；
宽度：700px；
保证金：自动；
}
.导航{
背景色：#3b6da1；/*覆盖整个顶部*/
}
.imageMapping：悬停{
高度：460px；
}
}

映射

此页面包含所有“我的地图”的图像。



CS:GO-Mapping

我相信以下内容将为您指明正确的方向。它利用jQuery中的toggleClass方法使图像达到全尺寸

JQuery:

$('img.sample-image').click(function() {
  $(this).toggleClass( "sample-image-large" );
});

CSS:

.sample-image
{
    width: 25%;
}

.sample-image-large
{
    width: 100% !important;
}

HTML

<img src="http://captainkimo.com/wp-content/uploads/2012/06/Sunset-at-Bass-Harbor-Lighthouse-Acadia-National-Park-Maine.jpg" class="sample-image">

看到它的作用：

.sample-image
{
    width: 25%;
}

.sample-image-large
{
    width: 100% !important;
}