Как сделать div за картинкой?

Question

[del993788]

Здравствуйте. Не получается засунуть за картинку div. Она почему то залезает под неё. Показать сайт не могу, т.к. он локальный, а вот код, пожалуйста.

<div id="mono">
<img src="{image-1}" >
<div id="tex">{short-story limit="10"}</div>
</div>

#mono {
    width:200px;
    height:200px;
    float:left;
    overflow: hidden;
    background:none;
    margin:10px; 

}
#mono img:active {
    transform: translate(0,-350px);
}

#mono img {
    height: 100%;
    width: 100%;
    transition: all 1s ease-out;
    cursor: pointer;
}
#tex {
    width:200px;
    height:200px;
    background:#FFD7A0;
}

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

Answer 1

[Михаил Горячкин]

Вот вам пример как это можно сделать без js-са:
HTML:

<div id="mono">
  <input type="checkbox" name="image" id="tonggle" />
  <label for="tonggle">
    <img src="http://wikipics.net/photos/20150206142322639625248.jpg" >
  </label>
  <div id="tex">Praesent sodales suscipit eros ut tempor. Curabitur pulvinar lectus ut enim gravida dictum. Vivamus eget nunc diam. Donec nec risus dictum, ullamcorper erat non, rutrum purus. Mauris lacus nibh, ornare sit amet ipsum et, rutrum sagittis tellus. Cras tincidunt facilisis facilisis. Cras lectus elit, efficitur at est nec, dictum gravida diam. Praesent eget ex porttitor nisi egestas commodo placerat vel eros. Nam sed justo congue, lobortis felis quis, fermentum massa. Donec egestas faucibus magna vitae maximus. Integer non facilisis dolor. Maecenas posuere elit ut magna bibendum, sit amet iaculis justo tempus. Vivamus vulputate eu neque quis hendre</div>
</div>

CSS:

#mono {
  width: 500px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
#mono label {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  z-index: 2;
  position: relative;
}
#mono input {
  position: absolute;
  left: -9999px;
}
#mono input:checked + label img {
  -webkit-transform: translate(0, -350px);
      -ms-transform: translate(0, -350px);
          transform: translate(0, -350px);
}
#mono #tex {
  position: absolute;
  padding: 20px;
  z-index: 1;
  top: 0;
  left: 0;
}
#mono img {
  width: 500px;
  position: relative;
  -webkit-transition: -webkit-transform 1s;
          transition: transform 1s;
}

Для наглядности вот вам демку накидал.

Answer 2

[y0u]

Измените #mono img:active на#mono:active > img, для начала. Так будет лучше. Поставьте блок #tex за блок #mono

<div id="mono">
    <img src="http://i.stack.imgur.com/IehB7.png" />
</div>
<div id="tex">blablabla</div>

и добавьте в свойства #tex следующее:

margin: 10px;
position: absolute;
z-index: -1;

jsfiddle.net/hnn8nq1g/2

По поводу «Картинка уезжает только когда я держу мышку» - это потому, что Вы используете псевдокласс :active. Добавьте немного js и будет работать так, как Вы хотите.

Comments

[del993788]

Я бы с радостью добавил,но уже какой день мучаюсь... Изучать js нет времени, а готовых решений как будто нет...

[y0u]

qqignatqq: ну Вам выше готовое решение же сделали без js. Отметьте его как решение

[del993788]

спасибо за решение. Вы бы не могли меня носом ткнуть в ссылку где реализовано передвижение блока за счет js. И что бы блок не возвращался обратно без повторного нажатия на него.