{"id":271120,"date":"2015-12-25T09:43:02","date_gmt":"2015-12-25T06:43:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=271120"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=271120","title":{"rendered":"Intermediate CSS3 Hover Effects. \u041f\u043e\u0448\u0430\u0433\u043e\u0432\u044b\u0439 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b. \u0427\u0430\u0441\u0442\u044c 2"},"content":{"rendered":"

\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435\u043c \u043c\u043e\u0435\u0439 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438<\/a>, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u0430\u043c CSS3 transitions \u0438, \u0435\u0441\u043b\u0438 \u0432 \u043d\u0435\u0439 \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u0442\u0438\u0445 \u043e\u0441\u043d\u043e\u0432 \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445, \u0441\u0435\u0439\u0447\u0430\u0441 \u044f \u0445\u043e\u0442\u0435\u043b\u0430 \u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u043c, \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u043c \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c.<\/p>\n

\u0418\u0437-\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0440\u0430\u0437\u0431\u0438\u0442\u0430 \u043d\u0430 \u0442\u0440\u0438 \u0447\u0430\u0441\u0442\u0438. <\/b> \u041f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/a>. \u0422\u0440\u0435\u0442\u044c\u044f \u0447\u0430\u0441\u0442\u044c.<\/a><\/p>\n

\u0414\u0435\u043c\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u043b\u0435\u0436\u0430\u0442 \u0437\u0434\u0435\u0441\u044c<\/a>. \u0412\u0441\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0434\u0435\u043c\u043e, \u0437\u0434\u0435\u0441\u044c \u0436\u0435 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043d\u0430 \u043d\u0438\u0445 \u0430\u043a\u0446\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/u><\/p>\n

\u041f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435: \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 CSS3. <\/b><\/p>\n

<\/a><\/p>\n

\u042d\u0444\u0444\u0435\u043a\u0442 #12<\/b><\/p>\n

\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n

\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u0442\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0438\u0437 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e transition \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043b \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 (transition \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u043f\u0440\u043e\u0441\u0442\u0443 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442), \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0443\u044e html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0432\u0430 \u0431\u043b\u043e\u043a\u0430 \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430\u043c\u0438, \u043d\u0443 \u0438 \u0431\u043b\u043e\u043a \u0441 .overlay \u0438 \u0438\u043a\u043e\u043d\u043a\u043e\u0439 \u0442\u043e\u0436\u0435:<\/p>\n

<div class="effect eff-12">   <img src="img\/ef12.jpg" alt="Effect #12" \/>   <div class="overlay">     <div class="icon"><\/div>   <\/div>   <div class="gradient"><\/div>   <div class="inner-gradient"><\/div>   <div class="caption">     <h4>Title is Here<\/h4>     <p>       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.     <\/p>     <a class="btn" href="#" title="View More">View More<\/a>   <\/div> <\/div> <\/code><\/pre>\n
  \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b, \u044f \u043f\u0438\u0441\u0430\u043b\u0430 \u0434\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 #11.<\/p>\n
.eff-12 .gradient {   position: absolute;   top: 0px;   left: 0px;   width: 100%;   height: 100%;   opacity: 1;   background: linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);   transition: all 0.25s linear 0.2s; }  <\/code><\/pre>\n
  \u0418 \u0432\u0442\u043e\u0440\u043e\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438:<\/p>\n
.eff-12 .inner-gradient {   position: absolute;   top: 0px;   left: 0px;   width: 100%;   height: 100%;   opacity: 0;   background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);   transition: all 0.25s linear 0.2s; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043a\u0440\u043e\u0435\u043c .caption, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0432\u044b\u0435\u0445\u0430\u0442\u044c \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e:<\/p>\n
.eff-12 .caption {   position: absolute;   top: 0px;   left: 100%;   width: 100%;   height: 100%;   text-align: center;   color: white;   transition: all 0.2s linear 0s; } <\/code><\/pre>\n
  \u0423 \u043f\u0440\u043e\u0447\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 .caption \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438.<\/p>\n
  \u0411\u043b\u043e\u043a .overlay \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 #10:<\/p>\n
.eff-12 .overlay {   width: 0px;   height: 0px;   border: 50px solid transparent;   border-bottom: 50px solid rgba(255,255,255,0.6);   border-right: 50px solid rgba(255,255,255,0.6);   position: absolute;   right: 0;   bottom: 0;   transform-origin: right;   transition: all 0.2s linear 0s; }  .eff-12 .overlay .icon {   width: 35px;   height: 23px;   background: url('http:\/\/eisenpar.com\/view-icon.png') 0 0 no-repeat;   position: absolute;   top: 9px;   left: 5px;   transition: all 0.01s linear 0.2s; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442.<\/p>\n
  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0446\u0432\u0435\u0442\u0430\u0435\u0442 \u043f\u0435\u0440\u0432\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442:<\/p>\n
.eff-12:hover .gradient {   opacity: 0; } <\/code><\/pre>\n
  \u041e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441 \u044d\u0442\u0438\u043c \u0434\u0435\u043b\u0430\u0435\u043c \u0431\u043b\u043e\u043a \u0441\u043e \u0432\u0442\u043e\u0440\u044b\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c:<\/p>\n
.eff-12:hover .inner-gradient {   opacity: 1; } <\/code><\/pre>\n
  \u0423\u0431\u0438\u0440\u0430\u0435\u043c .overlay \u0438 \u0438\u043a\u043e\u043d\u043a\u0443:<\/p>\n
.eff-12:hover .overlay {   transform: scaleX(0); }  .eff-12:hover .overlay .icon {   opacity: 0;   transition-delay: 0s; } <\/code><\/pre>\n
  \u0418 \u0432\u044b\u0435\u0437\u0436\u0430\u0435\u0442 .caption:<\/p>\n
.eff-12:hover .caption {   left: 0px;   transition-delay: 0.35s; } <\/code><\/pre>\n
  \u042d\u0444\u0444\u0435\u043a\u0442 #13<\/b><\/p>\n
  \u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n
  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0430\u044f html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439:<\/p>\n
<div class="effect eff-13">   <img src="img\/ef13.jpg" alt="Effect #13" \/>   <div class="overlay">     <div class="icon"><\/div>   <\/div>   <div class="caption">     <h4>Title is Here<\/h4>     <p>       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.     <\/p>     <a class="btn" href="#" title="View More">View More<\/a>   <\/div> <\/div> <\/code><\/pre>\n
  \u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0427\u0442\u043e\u0431\u044b \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u201c\u043e\u0442\u0434\u0430\u043b\u0438\u0442\u044c\u201d \u043e\u0442 \u043d\u0430\u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u0435\u0435 \u043d\u0430\u0434\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u201c\u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c\u201d, \u0447\u0442\u043e \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435\u043c:<\/p>\n
.eff-13 img {   min-width: 100%;   min-height: 100%;   transform: scale(1.3);   transition: all 0.15s linear 0s; } <\/code><\/pre>\n
  \u0414\u0430\u043b\u044c\u0448\u0435 \u0434\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u0438\u043a\u043e\u043d\u043a\u0435 \u0438 .overlay. \u0418\u043a\u043e\u043d\u043a\u0435 \u0434\u0430\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 transition, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0438\u0441\u0447\u0435\u0437\u0430\u043b\u0430 \u0441\u043f\u0443\u0441\u0442\u044f 0.1s \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043d\u0430 hover), \u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0430\u0441\u044c \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438 \u043e\u0442\u043c\u0435\u043d\u0435 hover:<\/p>\n
.eff-13 .overlay {   width: 100%;   height: 45px;   position: absolute;   left: 0;   bottom: 0;   background: rgba(255,255,255,0.6);   transition: all 0.15s linear 0s; }  .eff-13 .overlay .icon {   width: 35px;   height: 23px;   background: url('http:\/\/eisenpar.com\/view-icon.png') 0 0 no-repeat;   position: absolute;   top: 11px;   left: 45%;   opacity: 1;   transition: all 0.01s linear 0s; } <\/code><\/pre>\n
  \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f .caption \u0438 \u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432: \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 transition, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c transition-delay (\u0443\u043a\u0430\u0436\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043d\u0430 hover), \u0430 \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 0.<\/p>\n
.eff-13 .caption {   position: absolute;   top: 0px;   left: 0px;   width: 100%;   height: 100%;   text-align: center;   color: white; }  .eff-13 .caption h4 {   width: 80%;   margin: 40px auto 0px auto;   background: rgba(0,0,0,0.7);   font-weight: 400;   text-transform: uppercase;   font-size: 22px;   padding: 6px 0px;   position: relative;   opacity: 0;   transition: all 0.2s linear 0s; }  .eff-13 .caption h4:before {   content: "";   width: 0px;   height: 0px;   display: block;   border: 20px solid transparent;   border-top: 20px solid rgba(0,0,0,0.7);   position: absolute;   top: 100%;   left: 42%; }  .eff-13 .caption p {   width: 100%;   max-width: calc(80% - 20px);   margin: 40px auto 0px auto;   background: rgba(0,0,0,0.8);   font-weight: 400;   padding: 6px 10px;   font-size: 14px;   opacity: 0;   transition: all 0.2s linear 0s; }  .eff-13 .caption a {   display: inline-block;   margin: 30px auto 0px auto;   background-color: #7F3B1B;   color: inherit;   padding: 7px 20px;   font-size: 15px;   box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);   border-radius: 5px;   opacity: 0;   text-decoration: none;   transition: all 0.2s linear 0s; } <\/code><\/pre>\n
  \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442. <\/p>\n
  \u041e\u0442\u0434\u0430\u043b\u044f\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044f \u0435\u0433\u043e \u0434\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430:<\/p>\n
.eff-13:hover img {   transform: scale(1); } <\/code><\/pre>\n
  \u0421\u0436\u0438\u043c\u0430\u0435\u043c \u043a \u0446\u0435\u043d\u0442\u0440\u0443 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0443 \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0443 \u0438\u0441\u0447\u0435\u0437\u043d\u0443\u0442\u044c:<\/p>\n
.eff-13:hover .overlay {   transform: scaleX(0);   transition-delay: 0.1s; }  .eff-13:hover .overlay .icon {   transition-delay: 0.1s;   opacity: 0; } <\/code><\/pre>\n
  \u0414\u0435\u043b\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b .caption \u0432\u0438\u0434\u0438\u043c\u044b\u043c\u0438:<\/p>\n
.eff-13:hover .caption h4, .eff-13:hover .caption p, .eff-13:hover .caption a {   opacity: 1; }  .eff-13:hover .caption h4 {   transition-delay: 0.5s; }  .eff-13:hover .caption p {   transition-delay: 0.4s; }  .eff-13:hover .caption a {   transition-delay: 0.3s; } <\/code><\/pre>\n
  \u042d\u0444\u0444\u0435\u043a\u0442 #14<\/b><\/p>\n
  \u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n
  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0443\u044e html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439:<\/p>\n
<div class="effect eff-14">   <img src="img\/ef14.jpg" alt="Effect #14" \/>   <div class="overlay">     <div class="icon"><\/div>   <\/div>   <div class="caption">     <h4>Title is Here<\/h4>     <p>       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.     <\/p>     <a class="btn" href="#" title="View More">View More<\/a>   <\/div> <\/div> <\/code><\/pre>\n
  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443. \u0427\u0442\u043e\u0431\u044b \u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0439 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043a \u0448\u0438\u0440\u0438\u043d\u0435, \u043d\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u043c \u0434\u0432\u0438\u0433\u0430\u0442\u044c, \u0438 \u043a \u0432\u044b\u0441\u043e\u0442\u0435, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043d\u0430\u0440\u0443\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0439. \u0417\u0430\u0440\u0430\u043d\u0435\u0435 \u0441\u043c\u0435\u0449\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043d\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438, \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u043c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0441\u043c\u0435\u0441\u0442\u0438\u043c, \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e.<\/p>\n
.eff-14 img {   min-width: 100%;   min-height: 100%;   height: calc(100% + 30px);   width: calc(100% + 30px);   transform: translate(-30px,0);   transition: all 0.15s linear 0s; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439, \u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 transition \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430 \u0434\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 #13:<\/p>\n
.eff-14 .overlay {   width: 100%;   height: 45px;   position: absolute;   left: 0;   bottom: 0;   background: rgba(255,255,255,0.6);   transition: all 0.15s linear 0s; }  .eff-14 .overlay .icon {   width: 35px;   height: 23px;   background: url('http:\/\/eisenpar.com\/view-icon.png') 0 0 no-repeat;   position: absolute;   top: 11px;   left: 45%;   transition: all 0.01s linear 0s; } <\/code><\/pre>\n
  \u041f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 .caption. \u0412 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 transition-timing-function \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043e\u0431\u044b\u0447\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c bounce-\u044d\u0444\u0444\u0435\u043a\u0442, \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0441\u043c\u0435\u0449\u0430\u0435\u043c \u0438\u0445 \u0432\u0432\u0435\u0440\u0445, \u043d\u0430 \u0432\u044b\u0441\u043e\u0442\u0443, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u201c\u043f\u0430\u0434\u0430\u0442\u044c\u201d:<\/p>\n
.eff-14 .caption {   position: absolute;   top: 0px;   left: 0px;   width: 100%;   height: 100%;   text-align: center;   color: white; }  .eff-14 .caption h4 {   width: 80%;   margin: 40px auto 0px auto;   background: rgba(0,0,0,0.7);   font-weight: 400;   text-transform: uppercase;   font-size: 22px;   padding: 6px 0px;   position: relative;   top: -200px;   transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; }  .eff-14 .caption h4:before {   content: "";   width: 0px;   height: 0px;   display: block;   border: 20px solid transparent;   border-top: 20px solid rgba(0,0,0,0.7);   position: absolute;   top: 100%;   left: 42%; }  .eff-14 .caption p {   width: 100%;   max-width: calc(80% - 20px);   margin: 40px auto 0px auto;   background: rgba(0,0,0,0.8);   font-weight: 400;   padding: 6px 10px;   font-size: 14px;   position: relative;   top: -250px;   transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; }  .eff-14 .caption a {   display: inline-block;   margin: 30px auto 0px auto;   background-color: #7F3B1B;   color: inherit;   padding: 7px 20px;   font-size: 15px;   box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);   border-radius: 5px;   top: -300px;   position: relative;   text-decoration: none;   transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; } <\/code><\/pre>\n
  \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442.<\/p>\n
  \u0421\u043c\u0435\u0449\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e. \u0415\u0441\u043b\u0438 \u0431\u044b \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c \u0441\u043c\u0435\u0449\u0430\u0442\u044c \u0435\u0435 \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e, \u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0431\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435, \u0430 \u0432 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0432\u044b\u0448\u0435 \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0431\u044b \u0432 \u044d\u0442\u043e\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 0px:<\/p>\n
.eff-14:hover img {   transform: translate(0,0); } <\/code><\/pre>\n
  \u0414\u0430\u043b\u044c\u0448\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u043c \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0443:<\/p>\n
.eff-14:hover .overlay {   transform: scaleX(0);   transition-delay: 0.1s; }  .eff-14:hover .overlay .icon {   transition-delay: 0.1s;   opacity: 0; } <\/code><\/pre>\n
  \u0418 \u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b .caption:<\/p>\n
.eff-14:hover .caption h4, .eff-14:hover .caption p, .eff-14:hover .caption a {   top: 0px; }  .eff-14:hover .caption h4 {   transition-delay: 0.5s; }  .eff-14:hover .caption p {   transition-delay: 0.4s; }  .eff-14:hover .caption a {   transition-delay: 0.3s; } <\/code><\/pre>\n
  \u042d\u0444\u0444\u0435\u043a\u0442 #15<\/b><\/p>\n
  \u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n
  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0443\u044e html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439:<\/p>\n
<div class="effect eff-15">   <img src="img\/ef15.jpg" alt="Effect #15" \/>   <div class="overlay">     <div class="icon"><\/div>   <\/div>   <div class="caption">     <h4>Title is Here<\/h4>     <p>       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.     <\/p>     <a class="btn" href="#" title="View More">View More<\/a>   <\/div> <\/div> <\/code><\/pre>\n
  \u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443. \u0412 \u044d\u0442\u043e\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u0435 \u043c\u044b \u0434\u0432\u0438\u0433\u0430\u0435\u043c \u0435\u0435 \u0438 \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e, \u0438 \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437, \u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0435\u0435 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u043d\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 (\u043e\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u044b\u043c \u0431\u044b\u0442\u044c \u0440\u0430\u0432\u043d\u044b\u043c, \u0438\u043d\u0430\u0447\u0435 \u0438\u0441\u043a\u0430\u0437\u044f\u0442\u0441\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438), \u0434\u0430\u043b\u0435\u0435, \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u0441\u0430\u043c\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0432\u043b\u0435\u0432\u043e \u0438 \u0432\u0432\u0435\u0440\u0445 \u043d\u0430 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0436\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0442\u0443\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0432\u043f\u0440\u0430\u0432\u043e \u0438 \u0432\u043d\u0438\u0437 (\u0435\u0441\u043b\u0438 \u043c\u044b \u044d\u0442\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c, \u0430 \u0443\u043a\u0430\u0436\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043d\u0430 hover, \u0442\u043e \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0441\u043d\u0438\u0437\u0443 \u0432\u0432\u0435\u0440\u0445 \u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e):<\/p>\n
.eff-15 img {   min-width: 100%;   min-height: 100%;   height: calc(100% + 30px);   width: calc(100% + 30px);   transform: translate(-30px,-30px) scale(1);   transition: all 0.15s linear 0s; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439, \u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 transition \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430 \u0434\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 #13:<\/p>\n
.eff-15 .overlay {   width: 100%;   height: 45px;   position: absolute;   left: 0;   bottom: 0;   background: rgba(255,255,255,0.6);   transition: all 0.15s linear 0s; }  .eff-15 .overlay .icon {   width: 35px;   height: 23px;   background: url('http:\/\/eisenpar.com\/view-icon.png') 0 0 no-repeat;   position: absolute;   top: 11px;   left: 45%;   transition: all 0.01s linear 0s; } <\/code><\/pre>\n
  \u0418 \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 .caption. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 transition-timing-function, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c bounce-\u044d\u0444\u0444\u0435\u043a\u0442, \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0441\u043c\u0435\u0449\u0430\u0435\u043c \u0438\u0445 \u0432\u043b\u0435\u0432\u043e, \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0431\u043b\u043e\u043a\u0430 \u0441 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c:<\/p>\n
.eff-15 .caption {   position: absolute;   top: 0px;   left: 0px;   width: 100%;   height: 100%;   text-align: center;   color: white; }  .eff-15 .caption h4 {   width: 80%;   margin: 40px auto 0px auto;   background: rgba(0,0,0,0.7);   font-weight: 400;   text-transform: uppercase;   font-size: 22px;   padding: 6px 0px;   position: relative;   left: 400px;   transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; }  .eff-15 .caption h4:before {   content: "";   width: 0px;   height: 0px;   display: block;   border: 20px solid transparent;   border-top: 20px solid rgba(0,0,0,0.7);   position: absolute;   top: 100%;   left: 42%; }  .eff-15 .caption p {   width: 100%;   max-width: -webkit-calc(80% - 20px);   max-width: -o-calc(80% - 20px);   max-width: -moz-calc(80% - 20px);   max-width: -ms-calc(80% - 20px);   max-width: calc(80% - 20px);   margin: 40px auto 0px auto;   background: rgba(0,0,0,0.8);   font-weight: 400;   padding: 6px 10px;   font-size: 14px;   position: relative;   left: 400px;   transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; }  .eff-15 .caption a {   display: inline-block;   margin: 30px auto 0px auto;   background-color: #7F3B1B;   color: inherit;   padding: 7px 20px;   font-size: 15px;   box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);   border-radius: 5px;   left: 400px;   position: relative;   text-decoration: none;   transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; } <\/code><\/pre>\n
  \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442.<\/p>\n
  \u0421\u043c\u0435\u0449\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c. \u0415\u0441\u043b\u0438 \u0431\u044b \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0435\u0435 \u0432\u043b\u0435\u0432\u043e \u0438 \u0432\u0432\u0435\u0440\u0445, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0431\u044b \u0437\u0434\u0435\u0441\u044c \u0432 \u043e\u0431\u043e\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u0445 translate \u043d\u0443\u0436\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0430 \u0432 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0431\u044b \u043d\u0443\u043b\u0435\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:<\/p>\n
.eff-15:hover img {   transform: translate(0px,0px) scale(1.1); } <\/code><\/pre>\n
  \u0423\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u043c \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0443:<\/p>\n
.eff-15:hover .overlay {   transform: scaleX(0);   transition-delay: 0.1s; }  .eff-15:hover .overlay .icon {   transition-delay: 0.1s;   opacity: 0; } <\/code><\/pre>\n
  \u0418 \u0432\u044b\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u043d\u0430 \u043c\u0435\u0441\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b .caption:<\/p>\n
.eff-15:hover .caption h4, .eff-15:hover .caption p, .eff-15:hover .caption a {   left: 0px; }  .eff-15:hover .caption h4 {   transition-delay: 0.3s; }  .eff-15:hover .caption p {   transition-delay: 0.35s; }  .eff-15:hover .caption a {   transition-delay: 0.4s; } <\/code><\/pre>\n
  \u042d\u0444\u0444\u0435\u043a\u0442 #16<\/b><\/p>\n
  \u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n
  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043c\u044b \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0443\u044e html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u043e\u0439 \u0438 \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438:<\/p>\n
<div class="effect eff-16">   <img src="img\/ef16.jpg" alt="Effect #16" \/>   <div class="overlay">     <div class="icon"><\/div>   <\/div>   <div class="triangle-set">     <div class="triangle triangle-1"><\/div>     <div class="triangle triangle-2"><\/div>     <div class="triangle triangle-3"><\/div>     <div class="triangle triangle-4"><\/div>   <\/div>   <div class="caption">     <h4>Title is Here<\/h4>     <p>       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.     <\/p>     <a class="btn" href="#" title="View More">View More<\/a>   <\/div> <\/div> <\/code><\/pre>\n
  \u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0443 \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439:<\/p>\n
.eff-16 .overlay {   width: 45px;   height: 100%;   position: absolute;   right: 0;   top: 0;   background: rgba(255,255,255,0.6);   transition: all 0.15s linear 0s; }  .eff-16 .overlay .icon {   width: 35px;   height: 23px;   background: url('http:\/\/eisenpar.com\/view-icon.png') 0 0 no-repeat;   position: absolute;   top: 46%;   left: 6px; } <\/code><\/pre>\n
  \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f .triangle-set:<\/p>\n
.eff-16 .triangle-set {   width: 100%;   height: 100%;   position: absolute;   top: 0px;   left: 0px; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u043c. \u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0430\u0432\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u0437\u044f\u0442\u044c \u0431\u043b\u043e\u043a, \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u2014 0px, \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 border \u0442\u0430\u043a\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b, \u043a\u0430\u043a\u0430\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0430 \u0432\u0430\u0448\u0435\u0433\u043e \u0442\u04400\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u0430 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u043d\u043e\u0439 border \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439, \u0447\u0442\u043e\u0431\u044b \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 \u043d\u0443\u0436\u043d\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443. <\/p>\n
  \u0412\u043e\u0442 \u043e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0430. \u041f\u043e\u043a\u0430 \u0442\u0443\u0442 \u0437\u0430\u0434\u0430\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n
 .eff-16 .triangle {   position: absolute;   width: 0px;   height: 0px;   border: 150px solid transparent;   opacity: 0;   transition: all 0.2s linear 0s; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432. \u0414\u043b\u044f \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u201c\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e\u201d \u0432\u043d\u0438\u0437, \u0437\u0430\u0434\u0430\u0435\u043c \u0446\u0432\u0435\u0442\u043d\u043e\u0439 border-top:<\/p>\n
.eff-16 .triangle-1 {   border-top: 150px solid rgba(255,255,255,0.6);   top: 0px;   left: 0px; } <\/code><\/pre>\n
  \u0414\u043b\u044f \u201c\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445\u201d \u0432\u043f\u0440\u0430\u0432\u043e, \u0432\u0432\u0435\u0440\u0445 \u0438 \u0432\u043b\u0435\u0432\u043e \u0442\u043e\u0436\u0435 \u0437\u0430\u0434\u0430\u0435\u043c border \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e:<\/p>\n
.eff-16 .triangle-2 {   border-right: 150px solid rgba(255,255,255,0.6);   top: 0px;   right: 0px; }  .eff-16 .triangle-3 {   border-bottom: 150px solid rgba(255,255,255,0.6);   bottom: 0px;   right: 0px; }  .eff-16 .triangle-4 {   border-left: 150px solid rgba(255,255,255,0.6);   bottom: 0px;   left: 0px; } <\/code><\/pre>\n
  \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c .caption \u0437\u0430 \u043b\u0435\u0432\u044b\u043c \u043a\u0440\u0430\u0435\u043c \u0431\u043b\u043e\u043a\u0430 \u0441 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c:<\/p>\n
.eff-16 .caption {   position: absolute;   top: 0px;   left: -100%;   width: 100%;   height: 100%;   text-align: center;   color: white;   transition: all 0.2s linear 0s; } <\/code><\/pre>\n
  \u0421\u0442\u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 .caption \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c\u0438.<\/p>\n
  \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442.<\/p>\n
  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442 .overlay:<\/p>\n
.eff-16:hover .overlay {   right: -45px; }  .eff-16:hover .overlay .icon {   opacity: 0; } <\/code><\/pre>\n
  \u041f\u043e\u0442\u043e\u043c \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438:<\/p>\n
.eff-16:hover .triangle {   opacity: 1; }  .eff-16:hover .triangle-1 {   transition-delay: 0.2s; }  .eff-16:hover .triangle-2 {   transition-delay: 0.55s; }  .eff-16:hover .triangle-3 {   transition-delay: 0.4s; }  .eff-16:hover .triangle-4 {   transition-delay: 0.35s; } <\/code><\/pre>\n
  \u0418, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432\u044b\u0435\u0437\u0436\u0430\u0435\u0442 .caption:<\/p>\n
.eff-16:hover .caption {   left: 0px;   transition-delay: 0.6s; } <\/code><\/pre>\n
  \u042d\u0444\u0444\u0435\u043a\u0442 #17<\/b><\/p>\n
  \u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n
  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043c\u044b \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0443\u044e html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u043e\u0439 \u0438 \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438:<\/p>\n
<div class="effect eff-17">   <img src="img\/ef17.jpg" alt="Effect #17" \/>   <div class="overlay">     <div class="icon"><\/div>   <\/div>   <div class="triangle-set">     <div class="triangle triangle-1"><\/div>     <div class="triangle triangle-2"><\/div>     <div class="triangle triangle-3"><\/div>     <div class="triangle triangle-4"><\/div>   <\/div>   <div class="caption">     <h4>Title is Here<\/h4>     <p>       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.     <\/p>     <a class="btn" href="#" title="View More">View More<\/a>   <\/div> <\/div> <\/code><\/pre>\n
  \u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c .overlay \u0438 \u0438\u043a\u043e\u043d\u043a\u0443:<\/p>\n
.eff-17 .overlay {   width: 45px;   height: 100%;   position: absolute;   right: 0;   top: 0;   background: rgba(255,255,255,0.6);   transition: all 0.15s linear 0s; }  .eff-17 .overlay .icon {   width: 35px;   height: 23px;   background: url('http:\/\/eisenpar.com\/view-icon.png') 0 0 no-repeat;   position: absolute;   top: 46%;   left: 6px; } <\/code><\/pre>\n
  \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f .triangle-set:<\/p>\n
.eff-17 .triangle-set {   width: 100%;   height: 100%;   position: absolute;   top: 0px;   left: 0px; } <\/code><\/pre>\n
  \u041e \u0442\u043e\u043c, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0440\u0430\u0432\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u044f \u043f\u0438\u0441\u0430\u043b\u0430 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0435 #16. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043c\u044b \u0435\u0449\u0435 \u0438 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043d\u0430 90 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432:<\/p>\n
.eff-17 .triangle {   position: absolute;   width: 0px;   height: 0px;   border: 150px solid transparent;   opacity: 0;   transform: rotate(-90deg);   transition: all 0.2s linear 0s; } <\/code><\/pre>\n
  \u0418 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430:<\/p>\n
.eff-17 .triangle-1 {   border-top: 150px solid rgba(255,255,255,0.6);   top: 0px;   left: 0px; }  .eff-17 .triangle-2 {   border-right: 150px solid rgba(255,255,255,0.6);   top: 0px;   right: 0px; }  .eff-17 .triangle-3 {   border-bottom: 150px solid rgba(255,255,255,0.6);   bottom: 0px;   right: 0px; }  .eff-17 .triangle-4 {   border-left: 150px solid rgba(255,255,255,0.6);   bottom: 0px;   left: 0px; } <\/code><\/pre>\n
  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u043a\u0440\u044b\u0442\u044c .caption:<\/p>\n
.eff-17 .caption {   position: absolute;   top: 0px;   left: 0px;   width: 100%;   height: 100%;   text-align: center;   color: white;   opacity: 0;   transition: all 0.2s linear 0s; } <\/code><\/pre>\n
  \u0423 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 .caption \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438. <\/p>\n
  \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442.<\/p>\n
  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0431\u0438\u0440\u0430\u0435\u043c .overlay:<\/p>\n
.eff-17:hover .overlay {   right: -45px; }  .eff-17:hover .overlay .icon {   opacity: 0; } <\/code><\/pre>\n
  \u041f\u0440\u043e\u044f\u0432\u043b\u044f\u0435\u043c \u0438 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438:<\/p>\n
.eff-17:hover .triangle {   opacity: 1;   transform: rotate(0deg); }  .eff-17:hover .triangle-1 {   transition-delay: 0.2s; }  .eff-17:hover .triangle-2 {   transition-delay: 0.35s; }  .eff-17:hover .triangle-3 {   transition-delay: 0.4s; }  .eff-17:hover .triangle-4 {   transition-delay: 0.55s; } <\/code><\/pre>\n
  \u0418 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f .caption:<\/p>\n
.eff-17:hover .caption {   opacity: 1;   transition-delay: 0.6s; } <\/code><\/pre>\n
  \u042d\u0444\u0444\u0435\u043a\u0442 #18<\/b><\/p>\n
  \u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n
  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043c\u044b \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0443\u044e html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u043e\u0439 \u0438 \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438:<\/p>\n
<div class="effect eff-18">   <img src="img\/ef18.jpg" alt="Effect #18" \/>   <div class="overlay">     <div class="icon"><\/div>   <\/div>   <div class="triangle-set">     <div class="triangle triangle-1"><\/div>     <div class="triangle triangle-2"><\/div>     <div class="triangle triangle-3"><\/div>     <div class="triangle triangle-4"><\/div>   <\/div>   <div class="caption">     <h4>Title is Here<\/h4>     <p>       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.     <\/p>     <a class="btn" href="#" title="View More">View More<\/a>   <\/div> <\/div> <\/code><\/pre>\n
  \u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0443 \u0438 \u0438\u043a\u043e\u043d\u043a\u0443:<\/p>\n
.eff-18 .overlay {   width: 45px;   height: 100%;   position: absolute;   right: 0;   top: 0;   background: rgba(255,255,255,0.6);   transition: all 0.15s linear 0s; }  .eff-18 .overlay .icon {   width: 35px;   height: 23px;   background: url('http:\/\/eisenpar.com\/view-icon.png') 0 0 no-repeat;   position: absolute;   top: 46%;   left: 6px; }  <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u044f \u043f\u0438\u0441\u0430\u043b\u0430 \u043a \u044d\u0444\u0444\u0435\u043a\u0442\u0443 #16. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f .triangle-set:<\/p>\n
.eff-18 .triangle-set {   width: 100%;   height: 100%;   position: absolute;   top: 0px;   left: 0px; } <\/code><\/pre>\n
  \u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438. Scale \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442: \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u0431\u043b\u043e\u043a\u043e\u0432, \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e, \u0440\u0430\u0432\u043d\u0430 0px, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0448\u0438\u0440\u0438\u043d\u044b border:<\/p>\n
.eff-18 .triangle {   position: absolute;   width: 0px;   height: 0px;   opacity: 0;   border: 5px solid transparent;   transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s; } <\/code><\/pre>\n
  \u0418 \u043f\u0440\u044f\u0447\u0435\u043c .caption \u0432\u043d\u0438\u0437, \u0437\u0430 \u043a\u0440\u0430\u0439 \u0431\u043b\u043e\u043a\u0430 \u0441 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c:<\/p>\n
.eff-18 .caption {   position: absolute;   top: 100%;   left: 0px;   width: 100%;   height: 100%;   text-align: center;   color: white;   transition: all 0.2s linear 0s; } <\/code><\/pre>\n
  \u0423 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 .caption \u0441\u0442\u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c\u0438.<\/p>\n
  \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442.<\/p>\n
  \u0423\u0431\u0438\u0440\u0430\u0435\u043c .overlay:<\/p>\n
.eff-18:hover .overlay {   right: -45px; }  .eff-18:hover .overlay .icon {   opacity: 0; } <\/code><\/pre>\n
  \u041c\u0435\u043d\u044f\u0435\u043c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432:<\/p>\n
.eff-18:hover .triangle {   opacity: 1;   border-width: 150px; } <\/code><\/pre>\n
  \u0418 \u0432\u044b\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u0432\u0432\u0435\u0440\u0445 .caption:<\/p>\n
.eff-18:hover .caption {   top: 0px;   transition-delay: 0.35s } <\/code><\/pre>\n
  \u042d\u0444\u0444\u0435\u043a\u0442 #19<\/b><\/p>\n
  \u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n
  \u041a\u0430\u043a \u0438 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0442\u0440\u0435\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043c\u044b \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0443\u044e html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439 \u0438 \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u043c\u0438:<\/p>\n
<div class="effect eff-19">   <img src="img\/ef19.jpg" alt="Effect #19" \/>   <div class="overlay">     <div class="icon"><\/div>   <\/div>   <div class="triangle-set">     <div class="triangle triangle-1"><\/div>     <div class="triangle triangle-2"><\/div>     <div class="triangle triangle-3"><\/div>     <div class="triangle triangle-4"><\/div>   <\/div>   <div class="caption">     <h4>Title is Here<\/h4>     <p>       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.     <\/p>     <a class="btn" href="#" title="View More">View More<\/a>   <\/div> <\/div> <\/code><\/pre>\n
  \u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a. \u0427\u0442\u043e\u0431\u044b \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f, \u0435\u0433\u043e \u043d\u0430\u0434\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u043d\u0430 \u0442\u0440\u0438 \u0447\u0430\u0441\u0442\u0438: \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u0438 \u0434\u0432\u0430 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0438 \u043d\u0438\u0436\u043d\u0438\u0439. \u041e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0440\u0430\u0432\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u044f \u0443\u0436\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430 \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0435 #16, \u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0447\u0443\u0442\u044c \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0430\u0432\u043d\u043e\u0431\u0435\u0434\u0440\u0435\u043d\u043d\u044b\u0439 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0435 border \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0430 \u0432\u0438\u0434\u0438\u043c\u044b\u0439 border \u2014 \u0434\u0440\u0443\u0433\u043e\u0433\u043e (\u043a\u0430\u043a \u043c\u044b \u043f\u043e\u043c\u043d\u0438\u043c, \u0432\u0438\u0434\u0438\u043c\u044b\u0439 border \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u0443\u0435\u0442 \u0432\u044b\u0441\u043e\u0442\u0443 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430):<\/p>\n
.eff-19 .overlay {   width: 100px;   height: 60px;   position: absolute;   left: 102px;   top: 119px;   background: rgba(255,255,255,0.6);   transition: all 0.2s linear 0s; }  .eff-19 .overlay:before {   content: "";   display: block;   width: 0px;   height: 0px;   border: 50px solid transparent;   border-bottom: 25px solid rgba(255,255,255,0.6);   position: absolute;   top: -75px;   left: 0px; }  .eff-19 .overlay:after {   content: "";   display: block;   width: 0px;   height: 0px;   border: 50px solid transparent;   border-top: 25px solid rgba(255,255,255,0.6);   position: absolute;   top: 60px;   left: 0px; } <\/code><\/pre>\n
  \u0418 \u0438\u043a\u043e\u043d\u043a\u0430:<\/p>\n
.eff-19 .overlay .icon {   width: 35px;   height: 23px;   background: url('http:\/\/eisenpar.com\/view-icon.png') 0 0 no-repeat;   position: absolute;   top: 20px;   left: 32px; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u044d\u0442\u0438 \u0437\u043d\u0430\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438.<\/p>\n
  \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f .triangle-set:<\/p>\n
.eff-19 .triangle-set {   width: 100%;   height: 100%;   position: absolute;   top: 0px;   left: 0px; } <\/code><\/pre>\n
  \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432. \u0421\u0435\u0439\u0447\u0430\u0441 \u0438\u0445 \u0432\u0438\u0434\u0438\u043c\u044b\u0435 .border \u0440\u0430\u0432\u043d\u044b 0px, \u043e\u0431 \u044d\u0442\u043e\u043c \u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430 \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0435 #18:<\/p>\n
.eff-19 .triangle {   position: absolute;   width: 0px;   height: 0px;   border: 150px solid transparent;   transition: all 0.3s linear 0s; }  .eff-19 .triangle-1 {   border-top: 0px solid rgba(255,255,255,0.6);   top: 0px;   left: 0px; }  .eff-19 .triangle-2 {   border-right: 0px solid rgba(255,255,255,0.6);   top: 0px;   right: 0px; }  .eff-19 .triangle-3 {   border-bottom: 0px solid rgba(255,255,255,0.6);   bottom: 0px;   right: 0px; }  .eff-19 .triangle-4 {   border-left: 0px solid rgba(255,255,255,0.6);   bottom: 0px;   left: 0px; } <\/code><\/pre>\n
  \u041f\u0440\u044f\u0447\u0435\u043c .caption:<\/p>\n
.eff-19 .caption {   position: absolute;   top: 0px;   left: 0px;   width: 100%;   height: 100%;   text-align: center;   color: white;   opacity: 0;   transition: all 0.2s linear 0s; } <\/code><\/pre>\n
  \u0423 \u043f\u0440\u043e\u0447\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 .caption \u0441\u0442\u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c\u0438.<\/p>\n
  \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442.<\/p>\n
  \u041f\u0440\u044f\u0447\u0435\u043c .overlay, \u043e\u043d \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f \u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c. \u041f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u043d\u0430 \u0442\u0430\u043a\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u044b\u0441\u0442\u0440\u044b\u043c, \u043d\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u043c:<\/p>\n
.eff-19:hover .overlay {   transform: rotate(200deg);   opacity: 0; }  .eff-19:hover .overlay .icon {   opacity: 0; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438:<\/p>\n
.eff-19:hover .triangle {   opacity: 1;   transition-delay: 0.2s; }  .eff-19:hover .triangle-1 {   border-top: 30px solid rgba(255,255,255,0.7); }  .eff-19:hover .triangle-2 {   border-right: 30px solid rgba(255,255,255,0.7); }  .eff-19:hover .triangle-3 {   border-bottom: 30px solid rgba(255,255,255,0.7); }  .eff-19:hover .triangle-4 {   border-left: 30px solid rgba(255,255,255,0.7); } <\/code><\/pre>\n
  \u0418 .caption:<\/p>\n
.eff-19:hover .caption {   opacity: 1;   transition-delay: 0.3s; } <\/code><\/pre>\n
  \u042d\u0444\u0444\u0435\u043a\u0442 #20<\/b><\/p>\n
  \u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n
  \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0443\u044e html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u043c \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439 \u0438 \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u0434\u0432\u0443\u043c\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0438 \u043b\u0435\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0430\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u0430:<\/p>\n
<div class="effect eff-20">   <img src="img\/ef20.jpeg" alt="Effect #20" \/>   <div class="overlay">     <div class="icon"><\/div>   <\/div>   <div class="triangle-set">     <div class="triangle triangle-1"><\/div>     <div class="triangle triangle-2"><\/div>   <\/div>   <div class="caption">     <h4>Title is Here<\/h4>     <p>       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.     <\/p>     <a class="btn" href="#" title="View More">View More<\/a>   <\/div> <\/div> <\/code><\/pre>\n
  \u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c .overlay. \u041f\u0440\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430 \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0435 #19:<\/p>\n
.eff-20 .overlay {   width: 100px;   height: 60px;   position: absolute;   left: 102px;   top: 119px;   background: rgba(255,255,255,0.6);   transition: all 0.2s linear 0s; }  .eff-20 .overlay:before {   content: "";   display: block;   width: 0px;   height: 0px;   border: 50px solid transparent;   border-bottom: 25px solid rgba(255,255,255,0.6);   position: absolute;   top: -75px;   left: 0px; }  .eff-20 .overlay:after {   content: "";   display: block;   width: 0px;   height: 0px;   border: 50px solid transparent;   border-top: 25px solid rgba(255,255,255,0.6);   position: absolute;   top: 60px;   left: 0px; }  .eff-20 .overlay .icon {   width: 35px;   height: 23px;   background: url('http:\/\/eisenpar.com\/view-icon.png') 0 0 no-repeat;   position: absolute;   top: 20px;   left: 32px; } <\/code><\/pre>\n
  \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f .triangle-set:<\/p>\n
.eff-20 .triangle-set {   width: 100%;   height: 100%;   position: absolute;   top: 0px;   left: 0px; } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u0431 \u0443\u0433\u043b\u043e\u0432\u044b\u0445 \u0431\u043b\u043e\u043a\u0430\u0445. \u041a\u0430\u043a \u043c\u044b \u043f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0431\u043b\u043e\u043a \u0441 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0438 \u0432\u044b\u0441\u043e\u0442\u043e\u0439, \u0440\u0430\u0432\u043d\u044b\u043c\u0438 0px, \u0434\u0435\u043b\u0430\u0435\u043c \u0432\u0441\u0435 border \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c\u0438, \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0439, \u0447\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u043b\u043e\u043a\u0438, \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u044d\u0442\u043e\u043c\u0443, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c\u0438 \u0434\u0432\u0430 border, \u0430 \u043d\u0435 \u043e\u0434\u0438\u043d. \u0414\u043b\u044f \u043b\u0435\u0432\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u2014 \u043b\u0435\u0432\u044b\u0439 \u0438 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 border, \u0434\u043b\u044f \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u2014 \u043d\u0438\u0436\u043d\u0438\u0439 \u0438 \u043f\u0440\u0430\u0432\u044b\u0439 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u044b \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u043b\u043e\u043a \u043d\u0430 100% \u0432\u043b\u0435\u0432\u043e \u0438 \u0432\u043f\u0440\u0430\u0432\u043e \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0431\u043b\u043e\u043a\u0430 \u0441 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e:<\/p>\n
.eff-20 .triangle {   position: absolute;   width: 0px;   height: 0px;   border: 150px solid transparent;   transition: all 0.3s linear 0s; }  .eff-20 .triangle-1 {   border-top: 40px solid rgba(255,255,255,0.6);   border-left: 40px solid rgba(255,255,255,0.6);   top: 0px;   left: -100%; }  .eff-20 .triangle-2 {   border-right: 40px solid rgba(255,255,255,0.6);   border-bottom: 40px solid rgba(255,255,255,0.6);   bottom: 0px;   right: -100%; } <\/code><\/pre>\n
  \u0414\u043b\u044f .caption \u0432\u0430\u0436\u043d\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 transition-timing-function, \u0447\u0442\u043e\u0431\u044b .caption, \u043a\u0430\u043a \u0431\u044b \u0443\u043f\u0440\u0443\u0433\u043e \u043f\u043e\u0434\u0441\u043a\u0430\u043a\u0438\u0432\u0430\u043b \u043f\u0440\u0438 \u0432\u044b\u0435\u0437\u0436\u0430\u043d\u0438\u0438 \u0441\u043d\u0438\u0437\u0443:<\/p>\n
.eff-20 .caption {   position: absolute;   top: 100%;   left: 0px;   width: 100%;   height: 100%;   text-align: center;   color: white;   transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s; } <\/code><\/pre>\n
  \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 .caption \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c\u0438.<\/p>\n
  \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442.<\/p>\n
  \u0417\u0430\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c .overlay, \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u0432\u044b\u0431\u043e\u0440\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432, \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430 \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0435 #19:<\/p>\n
.eff-20:hover .overlay {   transform: rotate(200deg);   opacity: 0; }  .eff-20:hover .overlay .icon {   opacity: 0; } <\/code><\/pre>\n
  \u0412\u044b\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u0431\u043b\u043e\u043a\u0438 \u0432 \u0443\u0433\u043b\u044b:<\/p>\n
.eff-20:hover .triangle {   transition-delay: 0.2s; }  .eff-20:hover .triangle-1 {   left: 0px; }  .eff-20:hover .triangle-2 {   right: 0px; } <\/code><\/pre>\n
  \u0418 \u0432\u044b\u0434\u0432\u0438\u0433\u0430\u0435\u043c .caption \u0441\u043d\u0438\u0437\u0443:<\/p>\n
.eff-20:hover .caption {   top: 0px;   transition-delay: 0.5s; } <\/code><\/pre>\n
  \u042d\u0444\u0444\u0435\u043a\u0442 #21<\/b><\/p>\n
  \u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n
  \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f, \u043a\u0440\u043e\u043c\u0435 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0439 html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, \u0431\u043b\u043e\u043a \u0441 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u043e\u0439 \u0438 \u0438\u043a\u043e\u043d\u043a\u043e\u0439 \u0438 \u0431\u043b\u043e\u043a \u0441 \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0449\u0438\u043c\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438:<\/p>\n
<div class="effect eff-21">   <img src="img\/ef21.jpg" alt="Effect #21" \/>   <div class="overlay">     <div class="icon"><\/div>   <\/div>   <div class="triangle"><\/div>   <div class="caption">     <h4>Title is Here<\/h4>     <p>       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.     <\/p>     <a class="btn" href="#" title="View More">View More<\/a>   <\/div> <\/div> <\/code><\/pre>\n
  \u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c .overlay. \u041f\u0440\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430 \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0435 #19:<\/p>\n
.eff-21 .overlay {   width: 100px;   height: 60px;   position: absolute;   left: 102px;   top: 119px;   background: rgba(255,255,255,0.6);   transition: all 0.2s linear 0s; }  .eff-21 .overlay:before {   content: "";   display: block;   width: 0px;   height: 0px;   border: 50px solid transparent;   border-bottom: 25px solid rgba(255,255,255,0.6);   position: absolute;   top: -75px;   left: 0px; }  .eff-21 .overlay:after {   content: "";   display: block;   width: 0px;   height: 0px;   border: 50px solid transparent;   border-top: 25px solid rgba(255,255,255,0.6);   position: absolute;   top: 60px;   left: 0px; }  .eff-21 .overlay .icon {   width: 35px;   height: 23px;   background: url('http:\/\/eisenpar.com\/view-icon.png') 0 0 no-repeat;   position: absolute;   top: 20px;   left: 32px; } <\/code><\/pre>\n
  \u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c .triangle. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430 \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0435 #18, \u0438 \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d border \u0431\u044b\u043b \u0432\u0438\u0434\u0438\u043c\u044b\u043c, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0443\u0433\u043b\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 #20, \u0441\u0442\u0440\u043e\u044f\u0449\u0435\u0433\u043e\u0441\u044f \u043d\u0430 \u0434\u0432\u0443\u0445 \u0432\u0438\u0434\u0438\u043c\u044b\u0445 border, \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u043d\u0430 \u0442\u0440\u0435\u0445. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f border-left \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u043e\u0439 \u0432\u044b\u0435\u043c\u043a\u0438 \u043f\u043e \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e. \u041f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 border-left, \u0438 \u043f\u043e\u0442\u043e\u043c\u0443 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0432\u044b\u0435\u043c\u043a\u0438 \u043d\u0435\u0442:<\/p>\n
.eff-21 .triangle {   position: absolute;   width: 0px;   height: 0px;   border: 150px solid transparent;   border-top: 150px solid rgba(255,255,255,0.6);   border-left: 500px solid rgba(255,255,255,0.6);   border-bottom: 150px solid rgba(255,255,255,0.6);   top: 0px;   left: 0px;   opacity: 0;   transition: all 0.3s linear 0s; } <\/code><\/pre>\n
  \u041f\u0440\u044f\u0447\u0435\u043c .caption \u0437\u0430 \u043b\u0435\u0432\u044b\u0439 \u043a\u0440\u0430\u0439 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 transition-timing-function:<\/p>\n
.eff-21 .caption {   position: absolute;   top: 0px;   left: -100%;   width: 100%;   height: 100%;   text-align: center;   color: white;   transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s; } <\/code><\/pre>\n
  \u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b .caption \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0441 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438.<\/p>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442.<\/p>\n
  \u0417\u0430\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c .overlay, \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u0432\u044b\u0431\u043e\u0440\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432, \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430 \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0435 #19:<\/p>\n
.eff-21:hover .overlay {   transform: rotate(200deg);   opacity: 0; }  .eff-21:hover .overlay .icon {   opacity: 0; } <\/code><\/pre>\n
  \u0414\u0435\u043b\u0430\u0435\u043c .triangle \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0443 \u043d\u0435\u0433\u043e \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0443\u044e \u0432\u044b\u0435\u043c\u043a\u0443, \u0438\u0437\u043c\u0435\u043d\u044f\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e .border-left:<\/p>\n
.eff-21:hover .triangle {   opacity: 1;   border-left: 100px solid rgba(255,255,255,0.6); } <\/code><\/pre>\n
  \u0418 \u0432\u044b\u0434\u0432\u0438\u0433\u0430\u0435\u043c .caption:<\/p>\n
.eff-21:hover .caption {   left: 0px;   transition-delay: 0.3s; } <\/code><\/pre>\n
<\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  http:\/\/habrahabr.ru\/post\/274005\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
       \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435\u043c \u043c\u043e\u0435\u0439 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438<\/a>, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u0430\u043c CSS3 transitions \u0438, \u0435\u0441\u043b\u0438 \u0432 \u043d\u0435\u0439 \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u0442\u0438\u0445 \u043e\u0441\u043d\u043e\u0432 \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445, \u0441\u0435\u0439\u0447\u0430\u0441 \u044f \u0445\u043e\u0442\u0435\u043b\u0430 \u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u043c, \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u043c \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c.<\/p>\n
  \u0418\u0437-\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0440\u0430\u0437\u0431\u0438\u0442\u0430 \u043d\u0430 \u0442\u0440\u0438 \u0447\u0430\u0441\u0442\u0438. <\/b> \u041f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/a>. \u0422\u0440\u0435\u0442\u044c\u044f \u0447\u0430\u0441\u0442\u044c.<\/a><\/p>\n
  \u0414\u0435\u043c\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u043b\u0435\u0436\u0430\u0442 \u0437\u0434\u0435\u0441\u044c<\/a>. \u0412\u0441\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0434\u0435\u043c\u043e, \u0437\u0434\u0435\u0441\u044c \u0436\u0435 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043d\u0430 \u043d\u0438\u0445 \u0430\u043a\u0446\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/u><\/p>\n
  \u041f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435: \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 CSS3. <\/b><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-271120","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/271120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=271120"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/271120\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=271120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=271120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=271120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}