Pure gallery gallery gallery

-1

Привет, все, что я пытаюсь достичь ниже, но я немного боюсь. В настоящий момент миниатюры находятся на левой стороне, но я хочу изменить миниатюры на дно и увеличить картинку сверху.Pure gallery gallery gallery

Я хочу, чтобы получить размер галереи 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

источник

2014-12-10 Krishnam

Вы можете предоставить рабочий [jsfiddle] (http://jsfiddle.net)? – Wavemaster

Я не думаю, что вы хотите сделать только с CSS. Кроме того, ваш HTML недопустим. Вы не закрываете теги 'dt' и' dd'. – jurgemaister

Извините @ Wavemaster Вот Jsfiddle http://jsfiddle.net/1Lrtwv3g/ – Krishnam

Вот моя попытка 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 pseudoelement)

enter image description here

затем при наведении (или мыши) выбранное изображение начать переход CSS на свойстве непрозрачности , Для того, чтобы сделать щелчок правильной работы необходимо определить уникальный id атрибут для каждого dd элементов

источник

2014-12-10 12:11:57 fcalderan

Ударьте меня на минутку! +1 http://jsfiddle.net/abhitalks/1Lrtwv3g/2/ – Abhitalks

С вашего кода, мы можем иметь лучшее решение, как показано ниже:

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>

Надеюсь, это поможет!

источник

2014-12-10 12:16:50

Pure gallery gallery gallery

ответ

Смежные вопросы