Добавить на-парении эффект на картинке

Question

Существует мой код:

CSS

.obrazkii img { 
      width: 25%; 
      float: left; 
     } 
@media screen and (max-width: 1180px) { 
    .entry-content { 
     width: 100% !important; 
    } 
} 
@media screen and (max-width: 885px) {.obrazkii img { 
      width: 50%; 
      float: left; 
     }} 
@media screen and (max-width: 590px) {.obrazkii img { 
      width: 100%; 
      float: left; 
     }} 

HTML

  <div> 
        <div class="obrazkii"> 
     <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span> 
     <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span> 
     <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span> 
     <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span> 
        </div> 
        <div class="obrazkii"> 
    <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span> 
     <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span> 
     <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span> 
     <span><a href="#"><img src="http://davehallsba.com/wp-content/uploads/2012/02/person-icon-145444.png"></a></span> 
        </div> 
       </div> 

DEMO:http://jsfiddle.net/4LjeL/111/

Все работает, но я хотел бы добавить дополнительную функцию. Когда я нахожусь на фотографии, я хотел бы показать текст над фотографией (с анимацией и непрозрачностью). Он также должен работать на мобильных устройствах .. Возможно ли это?

Answer 1

Добавление эффектов при наведении курсора, используя CSS может быть относительно легко, просто использовать:

#foo: hover {} 

, а затем вы можете определить, что он делает на парении.

Однако для таких вещей, как анимация и непрозрачность, а также мобильная поддержка, возможно, стоит взглянуть на JQueryUI и простой JQuery, чтобы помочь вам.

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