大家好，我正在努力实现以下目标，但我有点挣扎。目前缩略图在左侧，但我想将缩略图更改为底部，将较大的图片更改为顶部。
我想得到画廊的大小 475 X 469
你能帮帮我吗？
这是 JSFIDDLE http://jsfiddle.net/1Lrtwv3g/
我正在使用下面的代码，这是另一种方式。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
dl#simple-gallery {
width:475px;
position: fixed;
height:475px;
background-color:#00FBFF;
}
dl#simple-gallery dt{
width: 99px;
cursor: pointer;
}
dl#simple-gallery dt img {
width: 111px;
}
dl#simple-gallery dt:hover+dd {
opacity:1;
}
dl#simple-gallery dd {
position: absolute;
top: 0px;
margin-left: 99px;
opacity: 0;
transition: .7s opacity;
}
dl#simple-gallery dd img {
width: 368px;
height: 475px;
}
</style>
</head>
<body>
<dl id="simple-gallery">
<dt tabindex="1"><img src="1.gif">
<dd><img src="m1.gif">
<dt tabindex="2"><img src="2.gif">
<dd><img src="m2.gif">
<dt tabindex="3"><img src="3.gif">
<dd><img src="m3.gif">
<dt tabindex="4"><img src="4.gif">
<dd><img src="m4.gif">
</dl>
</body>
</html>
最佳答案
这是我的尝试 http://codepen.io/anon/pen/OPMeXM
单个缩略图和缩放图像的标记是
<!-- thumbnail -->
<dt><a href="#img1"><img src="..."></a></dt>
<!-- zoom -->
<dd id="img1"><img src="..."></dd>
CSS代码是
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
dl {
position: relative;
width:475px;
height:468px;
border: 2px #ccc dashed;
padding-top: 360px;
white-space: nowrap;
}
dl:before {
content: "Hover a thumbnail";
position: absolute;
font: 48px Tahoma;
display: block;
top: 150px;
color: #d8d8d8;
text-shadow: 1px 1px 3px #666;
width: 100%;
text-align: center;
}
dt, dd { margin: 0; padding: 0;}
dl img { max-width: 100%; }
dt {
border: 1px #ccc solid;
display: inline-block;
height: 100px;
width: 25%;
border:3px #fff solid;
}
dt:last-of-type,
dt:first-of-type { border-color: transparent;}
dd {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 1s opacity;
}
dt:hover + dd, /* show the zoom on hover */
dd:target /* show zoom on click (where :target is supported) */
{
opacity: 1;
}
这里是初始状态的截图(标题是dl:before伪元素的内容)
然后在悬停(或单击)时，所选图像在不透明度属性上开始 css 转换。为了使点击正常工作，您需要为每个 dd 元素定义一个唯一的 id 属性
关于css - 纯 CSS 图片库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27400007/