Pure CSS image gallery

Question

Hello all I am trying to achieve the below but I am struggling a little bit. At the moment the thumbnails are on the left side but I want to change the thumbnails to the bottom and the bigger picture on to the top.

I want to get the gallery size 475 X 469

enter image description here

Could you please help me?

Here is the JSFIDDLE http://jsfiddle.net/1Lrtwv3g/

I am using the below code which is the other way.

<!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

I don't think what you want to do is possible with only CSS. Also, your HTML is invalid. You don't close your `dt` and `dd` tags. — Jørgen R, Dec 10 '14 at 11:39
Sorry @Wavemaster Here is Jsfiddle http://jsfiddle.net/1Lrtwv3g/ — Krishnam, Dec 10 '14 at 11:44
I suppose something like this could work http://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Artyom Neustroev, Dec 10 '14 at 11:48

Fabrizio Calderan · Answer 1 · 2014-12-10T12:17:23.300

Here's my attempt http://codepen.io/anon/pen/OPMeXM

The markup of a single thumbnail and zoom image is

 <!-- thumbnail -->
 <dt><a href="#img1"><img src="..."></a></dt>

 <!-- zoom -->
 <dd id="img1"><img src="..."></dd>

and the CSS code is

* { 
  -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;
}

Here a screenshot of initial state (the caption is the content of dl:before pseudoelement)

enter image description here

then on hover (or on click) the selected image start a css transition on the opacity property. In order to make the click properly work you need to define a unique id attribute for every dd elements

score 0 · Answer 2 · answered Dec 10 '14 at 12:16

With your code, we can have best solution as below:

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>

Hope this helps!

Pure CSS image gallery

2 Answers2