Эффекты он ховер (on hover) всплывающих или меняющихся картинок

Такой эффект делается при помощи цсс3 и джеквери, очень красиво, элегантно, позволяет сделать сайт оригинальный и креативным.

Что делает данный эфект: 

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

2. При помощи цсс мы делаем стили для активной картинки, чтобы она например увеличивалась с тенькой, как на рисунке.

Данный пример нашла в интернете на английском, но для Друпала он не совсем подходил, потому переделали и решили выложить свой вариант, который будет нормально работать в cms Drupal, мы делали это в Друпале 7, в других версиях не проверяли.

Посмотреть пример данного эффекта можно вот тут http://www.conferancie.ru/geo-world, в будущем это будет проект conferancie.ru/geo-worlds

Ну и описываю, что нужно делать, для того, чтобы выполнить такой эффект.

Создаем файл js, называем его например "pop-up-pic.js", в этом файле прописываем вот такой код

 

(function ($) {

 

//  Custom.init;

  Drupal.behaviors.PopupInit = {

    attach: function (context, settings) {

      

              var $container  = $('.field-items'),

              $articles   = $container.children('.field-item'),

              timeout;

           

                $articles.mouseenter( function( event ) {

                   

              var $article    = $(this);

              clearTimeout( timeout );

              timeout = setTimeout( function() {

                   

                  if( $article.hasClass('active') ) return false;

                   

                  $articles.not($article).removeClass('active').addClass('blur');

                   

                  $article.removeClass('blur').addClass('active');

                   

              }, 75 );

               

          });

           

          $container.mouseleave( function( event ) {

               

              clearTimeout( timeout );

              $articles.removeClass('active blur');

               

          });

    

    }

  }

 

})(jQuery);

 

Только внимательно необходимо смотреть в код этого джееса, там возможно надо будет поменять класы на ваши. Затем прописываем код в css:

 

/*pop-up-pictures-for-jornal-node*/

 

.node-journal .field-name-field-image:after {

  content: ".";

  display: block;

  height: 0;

  clear: both;

  visibility: hidden;

}

 

.node-journal .field-name-field-image .field-items {

position: relative;

display: block;

}

 

.node-journal .field-name-field-image .field-items:before,

.node-journal .field-name-field-image .field-items:after

.node-news-geo-world .field-name-field-image .field-items:before,

.node-news-geo-world .field-name-field-image .field-items:after {

    content:"";

    display:table;

}

 

.node-journal .field-name-field-image .field-items:after {

    clear:both;

}

 

.node-journal .field-name-field-image .field-items .field-item {

display: block;

width: 140px;

height: auto;

background: #fff;

cursor: pointer;

float: left;

border: 10px solid #fff;

text-align: left;

text-transform: none;

margin: 15px;

z-index: 1;

-webkit-backface-visibility: hidden;

box-shadow: 

0px 0px 0px 10px rgba(255,255,255,1), 

1px 1px 3px 10px rgba(0,0,0,0.2);

-webkit-transition: 

opacity 0.4s linear, 

-webkit-transform 0.4s ease-in-out, 

box-shadow 0.4s ease-in-out;

-moz-transition: 

opacity 0.4s linear, 

-moz-transform 0.4s ease-in-out, 

box-shadow 0.4s ease-in-out;

-o-transition: 

opacity 0.4s linear, 

-o-transform 0.4s ease-in-out, 

box-shadow 0.4s ease-in-out;

-ms-transition: 

opacity 0.4s linear, 

-ms-transform 0.4s ease-in-out, 

box-shadow 0.4s ease-in-out;

transition: 

opacity 0.4s linear, 

transform 0.4s ease-in-out, 

box-shadow 0.4s ease-in-out;

  text-align: center;

 

}

 

.node-news-geo-world  .field-name-field-image .field-items .field-item{

width: 165px;

}

 

/* Hover Style for all the items: blur, scale down*/

 

.node-journal .field-name-field-image .field-items .field-item.blur {

box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);

-webkit-transform: scale(0.9);

-moz-transform: scale(0.9);

-o-transform: scale(0.9);

-ms-transform: scale(0.9);

transform: scale(0.9);

opacity: 0.7;

}

 

/* Hover Style for single item: scale up */

 

.node-journal .field-name-field-image .field-items .field-item.active {

-webkit-transform: scale(1.05);

-moz-transform: scale(1.05);

-o-transform: scale(1.05);

-ms-transform: scale(1.05);

transform: scale(1.05);

box-shadow: 

0px 0px 0px 10px rgba(255,255,255,1), 

1px 11px 15px 10px rgba(0,0,0,0.4);

z-index: 100;

opacity: 1;

}

 

/*end-pop-up-pictures-for-jornal-node*/

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