Как я могу активировать кроссфейд одним щелчком мыши вместо зависания?

Я работаю над сайтом своего портфолио, и это должен быть большой аккордеон с картинками в качестве вкладок. Поскольку это одна длинная страница, вкладки не будут ссылками. Я действительно новичок в jquery, поэтому я не уверен, как заставить его работать с моим CSS. По сути, то, что должно произойти, это то, что при нажатии на вкладку изображение вкладки переходит к заголовку, когда аккордеон тянет описание вниз. Я хочу, чтобы переход происходил только при нажатии.

Переход можно увидеть здесь

Он показывает, как должен работать переход, но пока он может быть вызван только состоянием наведения. Спасибо!

HTML:

 <div class="img-container">
    <img src="images/fashion_spread.jpg">
         <div class="img-hidden">
             <img src="images/fashion_spread_bw.jpg">
         </div>
 </div>

CSS:

.img-container {
    width: 100%;
    height: auto;
    margin-right: auto;
    margin-left:auto;
    float: left;
    display:list-item;
    position: relative;
}

.img-container img {
    width: 100%;
    height: auto;
}

.img-hidden {
    bottom:0;
    position: absolute;
    opacity:0;
    filter: alpha(opacity = 0);
    width: 100%;
    height: 100%;
    z-index:1000;
    transition:opacity 0.5s;
    -moz-transition:opacity 0.5s;
    -webkit-transition:opacity 0.5s;
}

.img-container:hover .img-hidden{
    opacity:1;
    filter: alpha(opacity = 100);
    transition:opacity 0.5s;
    -moz-transition:opacity 0.5s;
    -webkit-transition:opacity 0.5s;
}
Источник

2 ответа

Вы можете изменить свой :hover в :active но это применимо только к вашему эффекту, пока мышь удерживается нажатой. Я не думаю, что вы можете делать то, что вы хотите с одним только CSS.

Поскольку вы пометили jquery, вот решение для jquery:

Изменить это:

.img-container:hover .img-hidden{

к этому:

.img-container.active .img-hidden{

JQuery:

$(document).ready(function() {

   $('.img-container').on('click',function() {
       $(this).toggleClass('active'); 
    });

});

DEMO

РЕДАКТИРОВАТЬ

В свете комментариев ниже, вот полная, работающая HTML-страница:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <style type="text/css">
                .img-container {
                    width: 100%;
                    height: auto;
                    margin-right: auto;
                    margin-left:auto;
                    float: left;
                    display:list-item;
                    position: relative;
                  }

                .img-container img {
                    width: 100%;
                    height: auto;
                }

               .img-hidden {
                   bottom:0;
                   position: absolute;
                   opacity:0;
                   filter: alpha(opacity = 0);
                   width: 100%;
                   height: 100%;
                   z-index:1000;
                   transition:opacity 0.5s;
                   -moz-transition:opacity 0.5s;
                   -webkit-transition:opacity 0.5s;
                 }

                .img-container.active .img-hidden{
                    opacity:1;
                    filter: alpha(opacity = 100);
                    transition:opacity 0.5s;
                    -moz-transition:opacity 0.5s;
                    -webkit-transition:opacity 0.5s;
                 }

            </style>

            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

            <script type="text/javascript">

                $(document).ready(function() {

                    $('.img-container').on('click',function() {
                        $(this).toggleClass('active'); 
                    });

                });
            </script>
        </head>
        <body>

            <div class="img-container">
                <img src="images/fashion_spread.jpg">
                <div class="img-hidden">
                    <img src="images/fashion_spread_bw.jpg">
                </div>
            </div>

        </body>
     </html>
Источник

Решение только для css с использованием: target selector.

<div class="img-container">
  <a href="#target-hidden">
   <img src="http://i.imgur.com/wEYmgYC.jpg">
   <span id="target-hidden" class="img-hidden">
     <img src="http://i.imgur.com/XRUqimG.jpg">
   </span>
  </a>
</div>

#target-hidden:target {
  opacity:1;
  filter: alpha(opacity = 100);
  transition:opacity 0.5s;
  -moz-transition:opacity 0.5s;
  -webkit-transition:opacity 0.5s;
}

http://jsfiddle.net/Px52Y/10/

Источник
Другие вопросы по тегам