Текст появляется на :active (каменная кладка)

Я пытаюсь создать эффект, при котором изображения галереи, созданной Masonry, имеют непрозрачность 0,2 и достигают 1 непрозрачности при: hover.

Затем, если изображение :active, оно исчезает до непрозрачности 0,7, и поверх изображения появляется местоположение изображения «Петра, Иордания».

В настоящее время у меня все работает как нужно, кроме текстовой части. Как я могу создать этот эффект с помощью CSS или JS? Заранее спасибо.

<article class="bottomcontent"> 
        <h2>Visuals</h2>
    <section id="photos"></section>
</article>

<script>
$(document).ready(function() {
$('#photos').append( 
    '<img src="/visuals/visuals1.jpg" alt="Petra, Jordan"/>',
    '<img src="/visuals/visuals2.jpg" alt="img02"/>',
    '<img src="/visuals/visuals3.jpg" alt="img03"/>',
    '<img src="/visuals/visuals4.jpg" alt="img04"/>',
    '<img src="/visuals/visuals5.jpg" alt="img05"/>',
    '<img src="/visuals/visuals6.jpg" alt="img06"/>',
    '<img src="/visuals/visuals7.jpg" alt="img07"/>',
    '<img src="/visuals/visuals8.jpg" alt="img08"/>',
    '<img src="/visuals/visuals9.jpg" alt="img09"/>',
    '<img src="/visuals/visuals10.jpg" alt="img10"/>',
    '<img src="/visuals/visuals11.jpg" alt="img11"/>',
    '<img src="/visuals/visuals12.jpg" alt="img12"/>',
    '<img src="/visuals/visuals13.jpg" alt="img13"/>',
    '<img src="/visuals/visuals15.jpg" alt="img15"/>',
    '<img src="/visuals/visuals16.jpg" alt="img16"/>',
    '<img src="/visuals/visuals17.jpg" alt="img17"/>',
    '<img src="/visuals/visuals18.jpg" alt="img18"/>',
    '<img src="/visuals/visuals19.jpg" alt="img19"/>',
    '<img src="/visuals/visuals20.jpg" alt="img20"/>'
    );
  }
);    
</script>

CSS:

#photos img {
width: 100% !important;
height: auto !important;
opacity: 0.2;
filter: alpha(opacity=20);
}

#photos img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}

#photos img:active {
opacity: .5;
}

html css opacity hover masonry
person bprend    schedule 09.08.2015    source источник
comment
Можете ли вы предоставить ссылку jsfiddle для вашего кода, это будет проще   -  person Sachin Kanungo    schedule 10.08.2015
comment
jsfiddle.net/m77Lucnt   -  person bprend    schedule 10.08.2015

Ответы (1)


arrow_upward
0
arrow_downward

jsfiddle

вы можете использовать :after и data- для этого. Но img не поддерживает :after или :before, поэтому я оборачиваю img в div. Вот код:

      <div data-text="Display">
        <img id="text" style="width:100px;height:100px"/>
      </div>

      [data-text]{
           position:relative;
           display:inline-block;
      }
      [data-text] :hover{
           opacity:0.3;
      }
      [data-text]:hover::after{
           content:attr(data-text);
           position:relative;
           left:-65px;
           bottom:60px;
      }
person Jose Mar    schedule 09.08.2015
comment
Но как мне заключить изображения в div, если HTML содержит только ‹section id=›? - person bprend; 10.08.2015
comment
вы используете $.append() для добавления img к <section> , поэтому вы можете использовать его для переноса <img>. Заверните буквально. - person Jose Mar; 10.08.2015
comment
Когда я завернул каждую фотографию в div (поскольку каждая фотография имеет разный текст), мои четыре столбца рухнули в один. Как мне это восстановить? Во-вторых: вы использовали левый/нижний пиксель, чтобы получить текст над полем. Есть ли более элегантное решение для размещения текста по центру родительской фотографии? Спасибо. - person bprend; 12.08.2015
comment
Это решает вторую проблему: Проверьте этот новый jsfiddle, но можете ли вы дать видимый пример в jsfiddle? - person Jose Mar; 14.08.2015
comment
Ты человек. Я решил первую проблему; это была проблема с видимостью задней панели webkit. Решение: jsfiddle.net/vojzubcg - person bprend; 17.08.2015