Question

В настоящий момент ориентация демо картинок в разделе фотоальбома - альбомная. При нажатии мышкой открывается фотография в оригинальной ориентации. Как сделать демо картинки в разделе фотоальбома с книжной ориентацией?

Answer 1

Книжную ориентацию сделать легко, но вот управлять иконкой которая отображается при наведении, вот ее настроить сложно чтобы поместить ее на свое место и сделать как нужно.

Делается примерно так, стили в строке 745:

.second-effect:hover .mask {
 opacity: 1;
 border:110px solid rgba(0,0,0,0.7);
}

заменить на подобные:

.second-effect:hover .mask {
 opacity: 1;
 width: 320px;
 height: 400px;
 background: rgba(0,0,0,0.7);
}

далее стили с строки 763 по 778:

.view {
 width: 320px;
 height: 220px;
 float: left;
 overflow: hidden;
 position: relative;
 text-align: center;
 cursor: default;
}
.view .mask, .view .content {
 width: 320px;
 height: 220px;
 position: absolute;
 top: 0;
 left: 0;
}

заменить на что-то подобное:

.second-effect img {max-width:100%;height: 400px;}
img[src="/images/link.png"] {width:auto;height:auto;}
.view {
 width: 320px;
 height: 400px;
 float: left;
 position: relative;
 text-align: center;
 cursor: default;
}
.mask center {width:320px;height:400px;}
.mask center:hover {width:320px;height:400px;position:relative;top:45%;}
.view .mask, .view .content {
 position: absolute;
 top: 0;
 left: 0;
}

не идеальное решение конечно. Если не подойдет, верните как было.

Comments

Сделал как написали, теперь работает, спасибо!!!  Скажите, вот при наведении мышкой на демо картинку появляется, как и положено значок лупы. Но если мышкой навести - только в область верхней половины картинки, то начинает дергаться лупа и двоится её изображение. Скажите, это поддается устранению?

---

Иван Иванович,

Поддается. С стилей удалите строку 769:

.mask center:hover {width:224px;height:280px;position:relative;top:45%;}

далее поправьте  строку номер 759:

img[src="/images/link.png"] {width:auto;height:auto;}

вместо нее пропишите:

img[src="/images/link.png"] {width: 20px;height: 20px;position: relative;top: 45%;}

это решит проблему.

---

Yuri_Geruk,

Все исправил, отлично, спасибо за поддержку!!!!!