Question

大家好，我想要实现以下目标，但我有点挣扎。目前缩略图位于左侧，但我想将缩略图更改为底部，将更大的图片更改为顶部。

我想获得画廊大小 475 X 469

enter image description here

你能帮我吗？

这是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>

enter image description here

Answer 1

这是我的尝试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伪元素的内容）

enter image description here

然后在悬停（或点击）时，所选图像在不透明度属性上启动css过渡。为了使点击正常工作，您需要为每个id元素定义唯一的dd属性

Answer 2

使用您的代码，我们可以获得以下最佳解决方案：

<强> CSS：

dl#simple-gallery {
    width:475px;
    position: fixed;
    height:475px;
    background-color:#00FBFF;
}
dl#simple-gallery dt{
    width: 111px;
    cursor: pointer;
    position: relative;
    top: 485px;
    float: left;
    margin-right: 10px;
}

dl#simple-gallery dt.last-child{
    margin-right: 0;
}

dl#simple-gallery dt img {   
  width: 111px;
}

dl#simple-gallery dt:hover + dd { 
  opacity:1;
}

dl#simple-gallery dd {
  position: absolute;
  top: 0;
  margin: 0;
  opacity: 0;
  transition: .7s opacity;
}
dl#simple-gallery dd img {
    width: 475px;
    height: 475px;
}

<强> HTML：

<dl id="simple-gallery">
    <dt tabindex="1"><img src="1.gif"></dt>
    <dd><img src="m1.gif"></dd>
    <dt tabindex="2"><img src="2.gif"></dt>
    <dd><img src="m2.gif"></dd>
    <dt tabindex="3"><img src="3.gif"></dt>
    <dd><img src="m3.gif"></dd>
    <dt tabindex="4" class="last-child"><img src="4.gif"></dt>
    <dd><img src="m4.gif"></dd>
</dl>

希望这有帮助！

纯CSS图库

2 个答案: