{"id":264305,"date":"2015-08-26T12:26:02","date_gmt":"2015-08-26T08:26:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=264305"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=264305","title":{"rendered":"CSS3 hover effects. \u041f\u043e\u0448\u0430\u0433\u043e\u0432\u044b\u0439 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b"},"content":{"rendered":"<p>             \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u043c\u0430\u043d\u0443\u0430\u043b\u0430, \u043c\u043e\u0435\u0439 \u0446\u0435\u043b\u044c\u044e \u0431\u044b\u043b\u043e \u0432\u0437\u044f\u0442\u044c \u0442\u0440\u0438 \u0434\u0435\u0441\u044f\u0442\u043a\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u0447\u0430\u0441\u0442\u044c\u044e \u2014 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445, \u0447\u0430\u0441\u0442\u044c\u044e \u2014 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u043d\u044b\u0445 \u043c\u043d\u043e\u0439, \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438\u0445 \u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043a \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u043c, \u0438 \u043d\u0430 \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u043e\u0432\u0438\u0447\u043a\u0430\u043c, \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u043c\u0435\u0432\u0448\u0438\u043c \u0434\u0435\u043b\u043e \u0441 CSS3 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438, \u043a\u0430\u043a \u044d\u0442\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0438 \u043a\u0430\u043a \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e \u044d\u0442\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0441\u0442\u0430\u0442\u044c\u044f \u0432\u044b\u0448\u043b\u0430 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f, \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u0430\u044f, \u043c\u043d\u0435 \u0431\u044b\u043b\u043e \u0432\u0430\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u0434\u0435\u0442\u0430\u043b\u044c. <\/p>\n<p>  \u0414\u0435\u043c\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u043b\u0435\u0436\u0430\u0442 <a href=\"http:\/\/fox-hover.co.uk\/basic-hover-pack\/\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  <b>\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<p>  <b>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043a \u0440\u0430\u0431\u043e\u0442\u0435.<\/b><\/p>\n<p>  \u0418\u0442\u0430\u043a, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0430\u044f <b>html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430<\/b>:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;effect&gt;   &lt;img src=&quot;img\/ef1.jpg&quot; alt=&quot;Effect #1&quot; \/&gt;   &lt;div class=&quot;caption&quot;&gt;     &lt;h4&gt;Title is Here&lt;\/h4&gt;     &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.&lt;\/p&gt;     &lt;a class=&quot;btn&quot; href=&quot;#&quot; title=&quot;View More&quot;&gt;View More&lt;\/a&gt;   &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  <a name=\"habracut\"><\/a><br \/>  \u0414\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043e\u043d\u0430 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u0430, \u043d\u043e \u043a\u043e\u0435-\u0433\u0434\u0435 \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0432\u043d\u0435\u0441\u0442\u0438 \u0440\u044f\u0434 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c div-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c .effect, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c .caption, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0438, \u043a\u0430\u043a \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043d\u043e\u043f\u043a\u0443 \u201cView More\u201d. \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043c\u0435\u043d\u044f\u0442\u044c \u043c\u043e\u0436\u043d\u043e, \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0442\u043e\u0433\u0434\u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u0434\u043b\u044f CSS-\u043a\u043e\u0434\u0430.<\/p>\n<p>  \u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 <b>css-\u0441\u0442\u0438\u043b\u0438<\/b> \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b (\u043e\u043f\u044f\u0442\u044c \u0436\u0435, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u043e\u0439 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442, \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f): <\/p>\n<pre><code class=\"css\">.effect {   position: relative;   width: 300px;   height: 200px;   overflow: hidden; }  .effect img {   width: 100%;   height: 100%; }  .effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff; }  .effect .caption h4 {   font-size: 21px;   font-weight: 700;   text-transform: uppercase;   text-align: center;   border-bottom: 1px solid white;   padding-bottom: 20px;   margin-top: 20px; }  .effect .caption p {   margin: 15px 0px;   text-align: center;   font-style: italic;   padding: 0px 10px; }  .effect .caption a.btn {   width: 120px;   text-align: center;   display: block;   background: #68432d;   color: #fff;   padding: 10px 0px;   border-radius: 5px;   margin: 0px auto 0px auto; } <\/code><\/pre>\n<p>  <\/p>\n<h4>\u041e\u0441\u043d\u043e\u0432\u044b \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 transition. \u042d\u0444\u0444\u0435\u043a\u0442\u044b #1.1-1.3<\/h4>\n<p>  <a href=\"http:\/\/fox-hover.co.uk\/basic-hover-pack#ef1\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #1.1<\/b> \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e, \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0441\u0432\u0435\u0440\u0445\u0443 \u201c\u0432\u044b\u0435\u0437\u0436\u0430\u0435\u0442\u201d \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 .caption \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f, \u043d\u0443\u0436\u043d\u043e, \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432\u044b\u0448\u0435, \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0435\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e top, \u0438 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\"> .effect .caption {    position: absolute;    top: -100%;     left: 0px;    background: rgba(0,0,0,0.7);    width: 100%;    height: 100%;    color: #fff; } <\/code><\/pre>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a .caption \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 transition. transition \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a\u043e\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u044b\u0441\u0442\u0440\u043e, \u0441 \u043a\u0430\u043a\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439. <\/p>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0435\u0433\u043e \u043f\u043e\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u0412\u043e\u0442 \u0442\u0430\u043a \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e transition \u0434\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 #1.1:<\/p>\n<p>  <b>transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;<\/b><\/p>\n<p>  \u041f\u0435\u0440\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0438\u043c\u044f \u0441\u0442\u0438\u043b\u0435\u0432\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u043b\u0438 all \u2014 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0443\u0434\u0443\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0412\u0442\u043e\u0440\u043e\u0435 \u2014 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0432\u0440\u0435\u043c\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0422\u0440\u0435\u0442\u044c\u0435 \u2014 \u0437\u0430 \u0442\u043e, \u043a\u0430\u043a \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u0442\u043e\u0440\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c, \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430: \u0433\u0434\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u0441\u044f, \u0433\u0434\u0435 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u0441\u044f. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u043a \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u0441\u044f \u0438 \u0431\u043b\u0438\u0436\u0435 \u043a \u043a\u043e\u043d\u0446\u0443 \u0432\u044b\u0439\u0434\u0435\u0442 \u043d\u0430 \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u0443\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c. \u0427\u0435\u0442\u0432\u0435\u0440\u0442\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043d\u0430\u0447\u043d\u0435\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0438\u043b\u0438 \u043d\u0435\u0442. \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0432\u043d\u043e 0s \u2014 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u043d\u0435\u0442. <\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b. \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u041a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442:<\/p>\n<p>  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; \u2014 \u0434\u043b\u044f Chrome \u0438 Safari<br \/>  -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; \u2014 \u0434\u043b\u044f Opera<br \/>  -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; \u2014 \u0434\u043b\u044f IE<br \/>  -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; \u2014 \u0434\u043b\u044f Firefox<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0438 \u0438\u0445:<\/p>\n<pre><code class=\"css\">.effect .caption {    position: absolute;    top: -100%;    left: 0px;    background: rgba(0,0,0,0.7);    width: 100%;    height: 100%;    color: #fff;    -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;    -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;      -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;     -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;     transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;  } <\/code><\/pre>\n<p>  <i>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435, \u0434\u043b\u044f \u043a\u0440\u0430\u0442\u043a\u043e\u0441\u0442\u0438, \u044f \u0431\u0443\u0434\u0443 \u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b, \u043d\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u0430\u043a transition, transform \u0438 transform-origin. \u0412 \u043a\u043e\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043f\u043e\u0434 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 CSS (\u0438\u043b\u0438 \u0432 \u0441\u0430\u043c\u0438\u0445 \u0444\u0430\u0439\u043b\u0430\u0445) \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c.<\/i><\/p>\n<p>  \u0418\u0442\u0430\u043a, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430: \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443, \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0439 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438. <\/p>\n<pre><code class=\"css\">.effect:hover .caption {   top: 0px; } <\/code><\/pre>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #1.2<\/b> \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u0442\u043e\u043b\u044c\u043a\u043e .caption \u201c\u0432\u044b\u0435\u0437\u0436\u0430\u0435\u0442\u201d \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0432\u043d\u043e\u0441\u0438\u043c \u043d\u0435\u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0438\u043b\u0438 .caption:<\/p>\n<pre><code class=\"css\">.effect .caption {    position: absolute;    top: 0px;     left: 100%;     background: rgba(0,0,0,0.7);    width: 100%;    height: 100%;    color: #fff;    -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;    -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;      -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;     -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;     transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;  }  .effect:hover .caption {   left: 0px; } <\/code><\/pre>\n<p>  \u0410 \u0432\u043e\u0442 \u0432 <b>\u044d\u0444\u0444\u0435\u043a\u0442\u0435 #1.3<\/b> \u0432\u043d\u0435\u0441\u0435\u043d\u044b \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u044f. \u0422\u0430\u043a .caption \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0435 #1.1 \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437, \u043d\u043e \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0435\u043c\u0443 \u043d\u0430\u0432\u0441\u0442\u0440\u0435\u0447\u0443 \u0441\u043d\u0438\u0437\u0443 \u0432\u0432\u0435\u0440\u0445 \u0432\u044b\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0431\u043b\u043e\u043a.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430, \u0432\u043d\u0435\u0441\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443. \u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 div-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c .overlay \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0430, \u0432\u044b\u0435\u0437\u0436\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043d\u0438\u0437\u0443 \u0432\u0432\u0435\u0440\u0445: <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;effect&gt;   &lt;img src=&quot;img\/ef1.jpg&quot; alt=&quot;Effect #1&quot; \/&gt;   &lt;div class=&quot;caption&quot;&gt;     &lt;h4&gt;Title is Here&lt;\/h4&gt;     &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.&lt;\/p&gt;     &lt;a class=&quot;btn&quot; href=&quot;#&quot; title=&quot;View More&quot;&gt;View More&lt;\/a&gt;   &lt;\/div&gt;   &lt;div class=&quot;overlay&quot;&gt;&lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0412\u043d\u0435\u0441\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f .caption. \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0432\u044b\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437, \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0432\u0434\u0432\u043e\u0435, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0444\u043e\u043d\u0430 (\u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435, \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430 \u0434\u0432\u0430 \u0431\u043b\u043e\u043a\u0430), \u0434\u043e\u0431\u0430\u0432\u0438\u043c z-index, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u201c\u0432\u044b\u0448\u0435\u201d \u043f\u0440\u0438 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0438:<\/p>\n<pre><code class=\"css\">effect .caption {   position: absolute;   top: -100%;   left: 0px;   background: rgba(0,0,0,0.35);   width: 100%;   height: 100%;   color: #fff;   transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;   z-index: 10; } <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f .overlay.<\/p>\n<pre><code class=\"css\">.effect .overlay {   position: absolute;   top: 100%;   left: 0px;   background: rgba(0,0,0,0.35);   width: 100%;   height: 100%;   transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;   z-index: 5; } <\/code><\/pre>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439: .caption \u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0434\u043e top: 0px, \u0430 .overlay, \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u0436\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:  <\/p>\n<pre><code class=\"css\">.effect:hover .caption, .effect:hover .overlay {   top: 0px; } <\/code><\/pre>\n<h4>\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u042d\u0444\u0444\u0435\u043a\u0442\u044b #2.1-#2.3<\/h4>\n<p>  <a href=\"http:\/\/fox-hover.co.uk\/basic-hover-pack\/#ef2\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<p>  \u0412 <b>\u044d\u0444\u0444\u0435\u043a\u0442\u0435 #2.1<\/b> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u044b\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u0446\u0435\u043d\u0442\u0440\u0430 \u043a \u043a\u0440\u0430\u044f\u043c. \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439 html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430, \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. <\/p>\n<p>  \u0410 \u0432\u043e\u0442 \u0432 css-\u0441\u0442\u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u043d\u0435\u0441\u0442\u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f. \u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u0446\u0435\u043d\u0442\u0440 .caption, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e transition, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0435\u0439\u0447\u0430\u0441 \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"css\">.effect .caption h4 {   font-size: 21px;   font-weight: 700;   text-transform: uppercase;   text-align: center;   border-bottom: 1px solid white;   padding-bottom: 20px;   margin-top: 20px;   position: relative;   top: 62px;   transition: all 0.3s linear 0s; }  .effect .caption a.btn {   width: 120px;   text-align: center;   display: block;   background: #68432d;   color: #fff;   padding: 10px 0px;   border-radius: 5px;   margin: 0px auto 0px auto;   position: relative;   top: -58px;   transition: all 0.3s linear 0s;   } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"css\">.effect:hover h4, .effect:hover a.btn {   top: 0px; } <\/code><\/pre>\n<p>  \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043d\u0435 \u0441\u0430\u043c\u044b\u0439 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u041f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u0430\u044f \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0430 \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0434\u0435\u043b\u0430\u0441\u044c, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u0443\u0447\u043a\u0443\u044e\u0442\u0441\u044f \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0438 \u043d\u0435\u044d\u0441\u0442\u0435\u0442\u0438\u0447\u043d\u043e \u043e\u0442\u0442\u0443\u0434\u0430 \u0440\u0430\u0437\u044a\u0435\u0437\u0436\u0430\u044e\u0442\u0441\u044f. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e transition, \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043d\u043e \u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0433\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0435\u0439 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0441\u043a\u0440\u044b\u0442\u044c \u0438 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0443, \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0434\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0438\u0445 \u043f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0438 transition \u043a .caption:  <\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff;   opacity: 0;   transition: all 0.5s linear 0s; } <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0441\u0435\u0439\u0447\u0430\u0441 .caption \u043c\u044b \u0441\u043f\u0440\u044f\u0442\u0430\u043b\u0438, \u0438 \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 .caption, \u0438 \u043a\u043e\u0434 \u0434\u043b\u044f \u043d\u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:  <\/p>\n<pre><code class=\"css\">.effect .caption h4 {   font-size: 21px;   font-weight: 700;   text-transform: uppercase;   text-align: center;   border-bottom: 1px solid white;   padding-bottom: 20px;   margin-top: 20px;   position: relative;   top: 62px;   opacity: 0;   transition: all 0.3s linear 0s; }  .effect .caption a.btn {   width: 120px;   text-align: center;   display: block;   background: #68432d;   color: #fff;   padding: 10px 0px;   border-radius: 5px;   margin: 0px auto 0px auto;   position: relative;   top: -58px;   opacity: 0;   transition: all 0.3s linear 0s;   }  .effect .caption p {   margin: 15px 0px;   text-align: center;   font-style: italic;   padding: 0px 10px;   opacity: 0;   transition: all 0.3s linear 0s; } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430 hover \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435: \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c .caption \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0435 \u0441\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0441 opacity: 0 \u043d\u0430 opacity: 1, \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441 \u0447\u0435\u043c \u043d\u0430\u0447\u043d\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0438 \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n<pre><code class=\"css\">.effect:hover h4, .effect:hover a.btn {   top: 0px;   opacity: 1; }  .effect:hover .caption, .effect:hover p {   opacity: 1; } <\/code><\/pre>\n<p>  \u042d\u0444\u0444\u0435\u043a\u0442\u044b #2.2 \u0438 #2.3 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 #2.2 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u044b \u0441\u043c\u0435\u0449\u0430\u0435\u043c \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437 \u0438 \u0441\u043d\u0438\u0437\u0443 \u0432\u0432\u0435\u0440\u0445 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0430 \u0434\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 #2.3 \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e \u0438 \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<p>  \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u043d\u0435\u0441\u0442\u0438 \u0432 \u043a\u043e\u0434 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 #2.1, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c <b>\u044d\u0444\u0444\u0435\u043a\u0442 #2.2<\/b>:<\/p>\n<pre><code class=\"css\">.effect .caption h4 {   font-size: 21px;   font-weight: 700;   text-transform: uppercase;   text-align: center;   border-bottom: 1px solid white;   padding-bottom: 20px;   margin-top: 20px;   position: relative;   top: -66px;   opacity: 0;   transition: all 0.3s linear 0s; }  .effect .caption a.btn {   width: 120px;   text-align: center;   display: block;   background: #68432d;   color: #fff;   padding: 10px 0px;   border-radius: 5px;   margin: 0px auto 0px auto;   position: relative;   top: 66px;   opacity: 0;   transition: all 0.3s linear 0s;   } <\/code><\/pre>\n<p>  \u0412 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u043c, \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c. <\/p>\n<p>  \u041d\u0443 \u0430 \u0447\u0442\u043e\u0431\u044b \u0438\u0437 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 #2.1 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c <b>\u044d\u0444\u0444\u0435\u043a\u0442 #2.3<\/b>, \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:  <\/p>\n<pre><code class=\"css\">  font-size: 21px;   font-weight: 700;   text-transform: uppercase;   text-align: center;   border-bottom: 1px solid white;   padding-bottom: 20px;   margin-top: 20px;   position: relative;   left: 300px;   opacity: 0;   transition: all 0.3s linear 0s; }  .effect .caption a.btn {   width: 120px;   text-align: center;   display: block;   background: #68432d;   color: #fff;   padding: 10px 0px;   border-radius: 5px;   margin: 0px auto 0px auto;   position: relative;   left: -300px;   opacity: 0;   transition: all 0.3s linear 0s;   }  .effect:hover h4, .eff-2-3:hover a.btn {   left: 0px;   opacity: 1; } <\/code><\/pre>\n<p>  <\/p>\n<h4>\u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e transform \u0438 \u043e\u0431 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0438\/\u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u042d\u0444\u0444\u0435\u043a\u0442\u044b #3.1-#3.3<\/h4>\n<p>  <a href=\"http:\/\/fox-hover.co.uk\/basic-hover-pack\/#ef3\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #3.1<\/b> \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e, \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438, \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b &lt;h4&gt;, &lt;p&gt; \u0438 &lt;a&gt;, \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0434\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432. <\/p>\n<p>  html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u043e\u0439. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u0442\u0438\u043b\u0435\u0439, \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044e\u0449\u0438\u043c\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e transform. Transform \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b: \u0432\u0440\u0430\u0449\u0430\u0442\u044c, \u043c\u0435\u043d\u044f\u0442\u044c \u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043d\u0430\u043a\u043b\u043e\u043d\u044f\u0442\u044c, \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c, \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435\/\u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0439 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 transform \u2014 scale(x,y), \u0433\u0434\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 x \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0430 y \u2014 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f &lt;h4&gt;, &lt;p&gt; \u0438 &lt;a&gt;, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0432\u043e\u0442 \u0447\u0442\u043e:<\/p>\n<pre><code class=\"css\">.effect .caption h4 {   font-size: 21px;   font-weight: 700;   text-transform: uppercase;   text-align: center;   border-bottom: 1px solid white;   padding-bottom: 20px;   margin-top: 20px;   transform: scale(2);   transition: all 0.3s linear 0s; } <\/code><\/pre>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f scale \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435 \u0434\u0432\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430, \u0430 \u043e\u0434\u0438\u043d, \u0438 \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0438 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u043d\u0430\u0448 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d \u0432 \u0434\u0432\u0430 \u0440\u0430\u0437\u0430.<\/p>\n<pre><code class=\"css\">.effect .caption p {   margin: 15px 0px;   text-align: center;   font-style: italic;   padding: 0px 10px;   transform: scale(2);   transition: all 0.3s linear 0s; }  .effect .caption a.btn {   width: 120px;   text-align: center;   display: block;   background: #68432d;   color: #fff;   padding: 10px 0px;   border-radius: 5px;   margin: 0px auto 0px auto;   transform: scale(2);   transition: all 0.3s linear 0s; } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430 hover \u043d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u044d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043e \u0438\u0445 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0447\u0442\u043e \u043c\u044b \u0438 \u0434\u0435\u043b\u0430\u0435\u043c, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u044d\u0442\u0438 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">.effect:hover .caption h4, .effect:hover .caption p, .effect:hover .caption a.btn {   transform: scale(1); } <\/code><\/pre>\n<p>  \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f .caption, \u043a\u0430\u043a \u0438 \u0432 \u0440\u0430\u0437\u0431\u043e\u0440\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 #2.1-#2.3, \u043c\u044b \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u043c\u0443 opacity: 0 \u0438 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0435 \u0432\u0440\u0435\u043c\u044f transition, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0438 \u043d\u0435 \u043e\u0442\u0432\u043b\u0435\u043a\u0430\u043b\u043e \u0437\u0440\u0438\u0442\u0435\u043b\u044f \u043e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff;   opacity: 0;   transition: all 0.2s linear 0s; }  .effect:hover .caption {   opacity: 1; } <\/code><\/pre>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #3.2<\/b> \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443, \u0441 \u0442\u0435\u043c \u043b\u0438\u0448\u044c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044e\u0442\u0441\u044f, \u0430 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438. \u0412\u044b\u0441\u0442\u0430\u0432\u0438\u043c \u0434\u043b\u044f \u043d\u0438\u0445 \u0442\u0430\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 scale: 0.25, \u0432\u0441\u0435 \u043f\u0440\u043e\u0447\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b.<\/p>\n<p>  \u0410 \u0432\u043e\u0442 <b>\u044d\u0444\u0444\u0435\u043a\u0442 #3.3<\/b> \u2014 \u044d\u0442\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f \u0438\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432. \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;p&gt; \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u043c\u0435\u0441\u0442\u0435 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442, \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f &lt;h4&gt; \u0438 &lt;a&gt;, \u043d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438\u0445 \u043d\u0430\u0432\u0435\u0440\u0445 \u0438 \u0432\u043d\u0438\u0437 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445:<\/p>\n<pre><code class=\"css\">.effect .caption h4 {   font-size: 21px;   font-weight: 700;   text-transform: uppercase;   text-align: center;   border-bottom: 1px solid white;   padding-bottom: 20px;   margin-top: 20px;   position: relative;   top: -100%;   transform: scale(0.25); }  .effect .caption a.btn {   width: 120px;   text-align: center;   display: block;   background: #68432d;   color: #fff;   padding: 10px 0px;   border-radius: 5px;   margin: 0px auto 0px auto;   position: relative;   top: 100%;   transform: scale(0.25); } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0434\u043e \u0437\u0430\u0434\u0430\u0442\u044c transition, \u043d\u043e \u0442\u0443\u0442 \u0432\u0441\u0442\u0430\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0432\u043e\u043f\u0440\u043e\u0441: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u2014 \u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u0438 \u043b\u0438\u0448\u044c \u043f\u043e\u0441\u043b\u0435 \u2014 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445, \u0442\u043e \u0435\u0441\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c transition \u0434\u043b\u044f \u043e\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u0435\u0437 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0438 transition \u0441 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0434\u043b\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f. <\/p>\n<p>  \u0417\u0430\u0434\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u0435\u0432\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f transition \u2014 \u043f\u0440\u043e\u0441\u0442\u043e: \u043c\u044b \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<p>  <b>transition: top 0.3s linear 0s, transform 0.3s linear 0.3s;<\/b><\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043a \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c:<\/p>\n<pre><code class=\"css\">.effect .caption h4 {   font-size: 21px;   font-weight: 700;   text-transform: uppercase;   text-align: center;   border-bottom: 1px solid white;   padding-bottom: 20px;   margin-top: 20px;   position: relative;   top: -100%;   transform: scale(0.25);   transition: top 0.3s linear 0s, transform 0.3s linear 0.3s; }  .effect .caption a.btn {   width: 120px;   text-align: center;   display: block;   background: #68432d;   color: #fff;   padding: 10px 0px;   border-radius: 5px;   margin: 0px auto 0px auto;   position: relative;   top: 100%;   transform: scale(0.25);   transition: top 0.3s linear 0s, transform 0.3s linear 0.3s; } <\/code><\/pre>\n<p>  \u0417\u0430\u0434\u0430\u0435\u043c \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439:<\/p>\n<pre><code class=\"css\">.effect:hover .caption h4, .effect:hover .caption a.btn {   transform: scale(1);   top: 0px; } <\/code><\/pre>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043a\u0440\u044b\u0442\u044c .caption \u043f\u043e \u043e\u0431\u0440\u0430\u0437\u0443 \u0438 \u043f\u043e\u0434\u043e\u0431\u0438\u044e \u0434\u0432\u0443\u0445 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff;   opacity: 0;   transition: all 0.3s linear 0s; }  .effect:hover .caption {   opacity: 1; } <\/code><\/pre>\n<p>  <\/p>\n<h4>\u041a\u0440\u0443\u0442\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b: rotate. \u0417\u0430\u0434\u0430\u0435\u043c \u201c\u0442\u043e\u0447\u043a\u0443 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f\u201d. \u042d\u0444\u0444\u0435\u043a\u0442\u044b #4.1-#4.4<\/h4>\n<p>  <a href=\"http:\/\/fox-hover.co.uk\/basic-hover-pack\/#ef4\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u201c\u043a\u0440\u0443\u0442\u0438\u0442\u044c\u201d \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 transform \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u2014 rotate \u0438 \u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b. \u041a\u0430\u043a\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0435\u0441\u0442\u044c \u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f rotate? \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043e\u0441\u044c \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f: X, Y \u0438\u043b\u0438 Z. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u043e\u0441\u0438 Y \u043d\u0430 30 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432, \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <b>transform: rotateY(30deg);<\/b><\/p>\n<p>  \u042d\u0444\u0444\u0435\u043a\u0442\u044b #4.1-#4.3 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u043d\u0430 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 .caption \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u0442\u0440\u0435\u0445 \u043e\u0441\u0435\u0439, \u0438 \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441 <b>\u044d\u0444\u0444\u0435\u043a\u0442\u0430 #4.1<\/b>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c .caption \u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u043a\u0440\u0443\u0433 \u043e\u0441\u0438 X. \u0412\u043e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u043e \u043f\u043e \u0441\u0435\u0431\u0435 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0437\u0440\u0435\u043b\u0438\u0449\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c \u0435\u0433\u043e \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. <\/p>\n<p>  html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439, \u0440\u0430\u0432\u043d\u043e \u043a\u0430\u043a \u0438 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f &lt;h4&gt;, &lt;p&gt; \u0438 &lt;a&gt; \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0418\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0431\u0443\u0434\u0443\u0442 \u043b\u0438\u0448\u044c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f .caption, \u0438, \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u044b\u0439 transform:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff;   transform: rotateX(0deg);   transition: all 0.4s linear 0s; }  .effect:hover .caption {   transform: rotateX(360deg); } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0440\u0443\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u044b\u0448\u0435\u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432. \u041d\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0440\u0443\u0442\u0438\u043b\u0441\u044f, \u043d\u043e \u0438, \u0432 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 hover, \u0438\u0441\u0447\u0435\u0437\u0430\u043b, \u0430 \u043d\u0430 hover \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0440\u0430\u0449\u0430\u043b\u0441\u044f, \u043d\u043e \u0438 \u201c\u0432\u044b\u043f\u043b\u044b\u0432\u0430\u043b\u201d. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d transform \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c scale. \u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0434\u0432\u0430 \u0438 \u0431\u043e\u043b\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 transform, \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0434\u0432\u0430\u0436\u0434\u044b, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0430\u0432\u0438\u043c \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b. \u0418 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0441 hover-\u0441\u0442\u0438\u043b\u044f\u043c\u0438:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff;   transform: rotateX(0deg) scale(0);   transition: all 0.4s linear 0s; }  .effect:hover .caption {   transform: rotateX(360deg) scale(1); } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c .caption \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u043a\u0440\u0443\u0433 \u043e\u0441\u0438, \u043d\u043e \u0438 \u0441\u043b\u043e\u0432\u043d\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u0433\u043b\u0443\u0431\u0438\u043d\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438.<\/p>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #4.2<\/b> \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u043e\u0441\u044c \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043d\u0430 Y. <\/p>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #4.3<\/b> \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f, \u043e\u043f\u044f\u0442\u044c \u0436\u0435, \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 rotateZ() \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430 \u0437\u0430\u043f\u0438\u0441\u0438 rotate(), \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u043d\u0430:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff;   transform: rotate(0deg) scale(0);   transition: all 0.4s linear 0s; }  .effect:hover .caption {   transform: rotate(360deg) scale(1); } <\/code><\/pre>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #4.4<\/b> \u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u041e\u043d \u0431\u0430\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043d\u043e \u0435\u0449\u0435 \u0438 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0442\u043e\u0447\u043a\u0438, \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u043d\u043e\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 transition-timing-function \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 transition. \u041d\u043e \u043d\u0430\u0447\u043d\u0435\u043c \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443. <\/p>\n<p>  \u0421\u0443\u0442\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0430\u043c\u043e \u043f\u043e \u0441\u0435\u0431\u0435, \u043e\u043d\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u0442\u043e\u0447\u043a\u0438. \u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u044d\u0442\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u2014 \u0446\u0435\u043d\u0442\u0440, \u0442\u043e \u0435\u0441\u0442\u044c 50% 50%, \u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u0441\u043c\u0435\u043d\u0438\u043c \u0438\u0445, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e .caption. \u0417\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c transform-origin. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c transition \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 transition-timing-function \u2014 linear: <\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff;   transform: rotate(0deg) scale(0);   transition: all 1.1s linear 0s; }  .effect:hover .caption {   transform: rotate(360deg) scale(1);   transform-origin: -10% -20%; } <\/code><\/pre>\n<p>  \u0421\u0435\u0439\u0447\u0430\u0441 \u044d\u0444\u0444\u0435\u043a\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442, \u043a\u0430\u043a \u043e\u0447\u0435\u043d\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 .caption \u0432\u043e\u043a\u0440\u0443\u0433 \u043e\u0441\u0438 Z \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0441\u043c\u0435\u0449\u0435\u043d\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f. \u0427\u0442\u043e\u0431\u044b \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442, \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 transition-timing-function \u043d\u0430 cubic-bezier(0.68, -0.55, 0.27, 1.55), \u0447\u0442\u043e \u0434\u0430\u0441\u0442 \u043d\u0430\u043c \u043e\u0447\u0435\u043d\u044c \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0445\u043e\u0434 \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0443\u044e \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0443 \u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u043d\u0430\u0437\u0430\u0434 \u0432 \u043a\u043e\u043d\u0446\u0435. \u0412\u043e\u0442 \u0442\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff;   transform: rotate(0deg) scale(0);   transition: all 1.1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s; }  .effect:hover .caption {   transform: rotate(360deg) scale(1);   transform-origin: -10% -20%; } <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0415\u0449\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e scale \u0438 transform-origin. \u042d\u0444\u0444\u0435\u043a\u0442\u044b #5.1-#5.4<\/h4>\n<p>  <a href=\"http:\/\/fox-hover.co.uk\/basic-hover-pack\/#ef5\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<p>  \u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u043f\u0438\u0441\u0430\u043b\u0430 \u0432 \u0440\u0430\u0437\u0431\u043e\u0440\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 #3.1-#3.3, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c scale \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u0434\u0432\u0443\u043c \u043e\u0441\u044f\u043c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044f\/\u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0432 \u0434\u043b\u0438\u043d\u0443 \u0438 \u0448\u0438\u0440\u0438\u043d\u0443, \u043d\u043e \u0438 \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u043e\u0441\u0438. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 <b>\u044d\u0444\u0444\u0435\u043a\u0442\u0435 #5.1<\/b> \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u043a\u0430\u043a .caption \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0446\u0435\u043d\u0442\u0440\u0430 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u043d\u043e \u0432\u044b\u0441\u043e\u0442\u0430 \u0435\u0433\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<p>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0438 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f &lt;h4&gt;, &lt;p&gt; \u0438 &lt;a&gt; \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438. \u0418\u0437\u043c\u0435\u043d\u044f\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f .caption, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u043e\u0441\u0438 X:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff;   transform: scaleX(0);   transition: all 0.4s linear 0s; } <\/code><\/pre>\n<p>  \u0418, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435, \u043d\u0430 hover:<\/p>\n<pre><code class=\"css\">.effect:hover .caption {   transform: scaleX(1); } <\/code><\/pre>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #5.2<\/b> \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u0442\u043e\u043b\u044c\u043a\u043e .caption \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0435\u0442\u0441\u044f \u043f\u043e \u043e\u0441\u0438 Y, \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u043d\u0443\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443.<\/p>\n<p>  \u0412 <b>\u044d\u0444\u0444\u0435\u043a\u0442\u0435 #5.3<\/b> .caption \u0442\u043e\u0436\u0435 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u043d\u043e \u043d\u0435 \u0438\u0437 \u0446\u0435\u043d\u0442\u0440\u0430, \u0430 \u043e\u0442 \u043b\u0435\u0432\u043e\u0433\u043e \u043a\u0440\u0430\u044f. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u0442\u043e\u0447\u043a\u0443, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434, \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c transform-origin, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 rotate:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff;   transform: scaleX(0);   transform-origin: left center;   transition: all 0.4s linear 0s; } <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u0441\u043c\u0435\u0449\u0430\u0435\u043c \u0442\u043e\u0447\u043a\u0443, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434, \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0432 \u043a\u0440\u0430\u0439\u043d\u0435\u0435 \u043b\u0435\u0432\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u043e\u043d\u0430 \u0442\u0430\u043a \u0438 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u043c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u2014 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443. \u041f\u0440\u043e\u0447\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c\u0438.<\/p>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #5.4<\/b> \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d \u044d\u0444\u0444\u0435\u043a\u0442\u0443 #5.3, \u0437\u0434\u0435\u0441\u044c .caption \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437, \u043e\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043a\u0440\u0430\u044f:  <\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff;   transform: scaleX(0);   transform-origin: center top;   transition: all 0.4s linear 0s; } <\/code><\/pre>\n<p>  \u0422\u043e\u0447\u043a\u0430 \u0441\u043c\u0435\u0449\u0435\u043d\u0430 \u0432 \u043a\u0440\u0430\u0439\u043d\u0435\u0435 \u0432\u0435\u0440\u0445\u043d\u0435\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0436\u0435 \u2014 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443. \u041f\u0440\u043e\u0447\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b. <\/p>\n<h4>\u041a\u0430\u043a \u0435\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u043a\u0443 rotate \u0438 transform-origin. \u042d\u0444\u0444\u0435\u043a\u0442\u044b #6.1-#6.3<\/h4>\n<p>  <a href=\"http:\/\/fox-hover.co.uk\/basic-hover-pack\/#ef6\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<p>  \u0412 <b>\u044d\u0444\u0444\u0435\u043a\u0442\u0435 #6.1<\/b> \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438 .caption \u043f\u0440\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u0435\u0441\u043b\u0438 \u0431\u044b \u0431\u044b\u043b \u0437\u0430\u043a\u0440\u0435\u043f\u043b\u0435\u043d \u043d\u0430 \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u043e\u043c \u0433\u0432\u043e\u0437\u0434\u0438\u043a\u0435. \u0420\u043e\u043b\u044c \u201c\u0433\u0432\u043e\u0437\u0434\u0438\u043a\u0430\u201d \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 transform-origin \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438, \u0430 \u043f\u043e\u0432\u043e\u0440\u043e\u0442 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 rotate.<\/p>\n<p>  html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439, \u0440\u0430\u0432\u043d\u043e \u043a\u0430\u043a \u0438 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f &lt;h4&gt;, &lt;p&gt; \u0438 &lt;a&gt;. \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f .caption. \u0414\u0430\u0432\u0430\u0439\u0442\u0435, \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u043c rotate:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff;   transform: rotate(180deg);   transition: all 0.4s cubic-bezier(0.4, 0, 1, 1) 0s; } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c .caption \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442 \u0432\u0432\u0435\u0440\u0445 \u043d\u043e\u0433\u0430\u043c\u0438. \u041f\u0443\u0441\u0442\u044c \u043d\u0430 hover \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435:  <\/p>\n<pre><code class=\"css\">.effect:hover .caption {   transform: rotate(0deg); } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438, .caption \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u043a\u0440\u0443\u0433 \u0441\u0432\u043e\u0435\u0439 \u043e\u0441\u0438. \u041d\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u043e\u0447\u043a\u0438, \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434, \u0438, \u043a\u0430\u043a \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u0435\u0435 \u043d\u0430\u0432\u0435\u0440\u0445 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff;   transform: rotate(180deg);   transform-origin: center top;   transition: all 0.4s cubic-bezier(0.4, 0, 1, 1) 0s; } <\/code><\/pre>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435: .caption \u0441\u043c\u0435\u0441\u0442\u0438\u0442\u0441\u044f \u043d\u0430\u0432\u0435\u0440\u0445, \u043a\u0430\u043a \u0435\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u0435\u043c\u0443 \u0434\u0430\u043b\u0438 top: -100%; \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u043c\u0435\u0441\u0442\u0438\u043b\u0430\u0441\u044c \u0442\u043e\u0447\u043a\u0430, \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043d \u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f. <\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u0435\u0441\u043b\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043c\u0435\u0449\u0430\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u201c\u0442\u043e\u0447\u043a\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u201d \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435, \u0442\u043e \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,<b> \u044d\u0444\u0444\u0435\u043a\u0442 #6.2<\/b> \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443, \u0442\u043e\u043b\u044c\u043a\u043e <b>transform-origin: center bottom;<\/b> \u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e \u043d\u0430 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u0435 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u043b\u043e \u0442\u0430\u043a\u0438\u043c <b>transform: rotate(-180deg);<\/b><\/p>\n<p>  \u0412 <b>\u044d\u0444\u0444\u0435\u043a\u0442\u0435 #6.3<\/b> \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u0436\u0435, \u043a\u0430\u043a \u0432 #6.2, \u0430 \u201c\u0442\u043e\u0447\u043a\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u201d \u0441\u043c\u0435\u0449\u0435\u043d\u0430 \u043d\u0430 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0443 \u043f\u0440\u0430\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430:<b> transform-origin: right center;<\/b> \u0412 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u043c, \u0441\u0442\u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0442\u0435\u043c\u0438 \u0436\u0435 \u0441\u0430\u043c\u044b\u043c\u0438.<\/p>\n<h4>\u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e delay. \u042d\u0444\u0444\u0435\u043a\u0442\u044b #7.1-#7.3<\/h4>\n<p>  <a href=\"http:\/\/fox-hover.co.uk\/basic-hover-pack\/#ef7\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<p>  \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0430\u0440\u0443\u0448\u0438\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0440\u0430\u0437\u0431\u043e\u0440\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 #7.2, \u043f\u043e\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a #7.3, \u0438 \u043b\u0438\u0448\u044c \u043f\u043e\u0442\u043e\u043c \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a #7.1 \u043a\u0430\u043a \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u0441\u043b\u043e\u0436\u043d\u043e\u043c\u0443 \u0438\u0437 \u043b\u0438\u043d\u0435\u0439\u043a\u0438. <\/p>\n<p>  \u0418\u0442\u0430\u043a, <b>\u044d\u0444\u0444\u0435\u043a\u0442 #7.2<\/b>: \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438 \u0441\u0432\u0435\u0440\u0445\u0443 \u0438 \u0441\u043d\u0438\u0437\u0443 \u0432\u044b\u0435\u0437\u0436\u0430\u044e\u0442 \u0434\u0432\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 .overlay \u0438, \u043a\u043e\u0433\u0434\u0430 \u0441\u043c\u044b\u043a\u0430\u044e\u0442\u0441\u044f, \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u044b\u0435\u0437\u0436\u0430\u0435\u0442 .caption.<\/p>\n<p>  html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0442\u0430\u043a\u0430\u044f:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;effect&quot;&gt;   &lt;img src=&quot;img\/ef7.jpg&quot; alt=&quot;Effect #7&quot; \/&gt;   &lt;div class=&quot;overlay overlay-top&quot;&gt;&lt;\/div&gt;   &lt;div class=&quot;overlay overlay-bottom&quot;&gt;&lt;\/div&gt;   &lt;div class=&quot;caption&quot;&gt;     &lt;h4&gt;Title is Here&lt;\/h4&gt;     &lt;p&gt; Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. &lt;\/p&gt;      &lt;a class=&quot;btn&quot; href=&quot;#&quot; title=&quot;View More&quot;&gt;View More&lt;\/a&gt;   &lt;\/div&gt;  &lt;\/div&gt; <\/code><\/pre>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0443 \u043d\u0430\u0441 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u0434\u0432\u0430 .overlay-\u0441\u043b\u043e\u044f, \u0442\u0435\u0445 \u0441\u0430\u043c\u044b\u0445, \u0447\u0442\u043e \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0435\u0437\u0436\u0430\u0442\u044c \u0441\u0432\u0435\u0440\u0445\u0443 \u0438 \u0441\u043d\u0438\u0437\u0443. <\/p>\n<p>  \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0435\u0439: \u0434\u043b\u044f &lt;h4&gt;, &lt;p&gt; \u0438 &lt;a&gt; \u0441\u0442\u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f .overlay-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432:<\/p>\n<pre><code class=\"css\">.effect .overlay {   background: rgba(0,0,0,0.7);   width: 100%;   height: 50%;   left: 0px;   position: absolute;   transition: all 0.15s linear 0s; }  .effect .overlay-top {   top: -100%; }  .effect .overlay-bottom {   top: 100%; } <\/code><\/pre>\n<p>  .overlay-top \u043c\u044b \u0443\u0431\u0440\u0430\u043b\u0438 \u0432\u0432\u0435\u0440\u0445, .overlay-bottom \u2014 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0432\u043d\u0438\u0437, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438 \u043e\u043d\u0438 \u0441\u044a\u0435\u0437\u0436\u0430\u043b\u0438\u0441\u044c. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0438\u043c\u0435\u0435\u0442 \u0432\u044b\u0441\u043e\u0442\u0443, \u0440\u0430\u0432\u043d\u0443\u044e 50% \u0432\u044b\u0441\u043e\u0442\u044b \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e:<\/p>\n<pre><code class=\"css\">.effect:hover .overlay-top {   top: 0px; }  .effect:hover .overlay-bottom {   top: 50%; } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0432\u0438\u0434 \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 .caption, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443 \u043d\u0430\u0441 \u0442\u043e\u0436\u0435 \u0441\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u0435\u0440\u0445\u0443, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043d\u0430\u0432\u0435\u0440\u0445 \u043f\u043e\u043c\u0435\u0449\u0435\u043d. \u0422\u0435\u043f\u0435\u0440\u044c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 .caption \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 .overlay, \u0431\u044b\u043b\u043e \u0431\u044b \u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u0447\u0442\u043e \u0443 \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 delay \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 transition: <\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: -100%;   left: 0px;   background: transparent;   width: 100%;   height: 100%;   color: #fff;   transition: all 0.2s linear 0.3s; }  .effect:hover .caption {   top: 0px; }    <\/code><\/pre>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041a\u0430\u043a\u043e\u0439 \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e \u0448\u0430\u0433\u0430\u043c:  <\/p>\n<ol>\n<li>\u041d\u0430\u0432\u043e\u0434\u0438\u043c \u043c\u044b\u0448\u044c \u043d\u0430 .effect <\/li>\n<li>\u0412\u044b\u0435\u0437\u0436\u0430\u044e\u0442 .overlay <\/li>\n<li>\u041f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f .caption <\/li>\n<li>\u0421\u043d\u0438\u043c\u0430\u0435\u043c hover <\/li>\n<li>.overlay \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0432\u043e\u0438 \u043c\u0435\u0441\u0442\u0430 <\/li>\n<li>.caption, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e delay, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043c\u0435\u0441\u0442\u043e \u043d\u0430 0.3s \u043f\u043e\u0437\u0436\u0435, \u0447\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0432\u0445\u043e\u0434\u0438\u043b\u043e \u0432 \u043d\u0430\u0448\u0438 \u043f\u043b\u0430\u043d\u044b <\/li>\n<\/ol>\n<p>  \u0412\u044b\u0445\u043e\u0434\u0438\u0442, \u0447\u0442\u043e delay, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f .caption, \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442, \u043d\u043e \u043d\u0435 \u0441 \u0442\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c, \u0441 \u043a\u0430\u043a\u0438\u043c \u0431\u044b \u043d\u0430\u043c \u044d\u0442\u043e\u0433\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c. \u0427\u0442\u043e \u0442\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c? <\/p>\n<p>  \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c delay \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u0442\u0438\u043b\u044f\u0445 \u0441\u0430\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043d\u043e \u0438 \u0432 \u0441\u0442\u0438\u043b\u044f\u0445 \u0435\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043d\u0430 hover, \u0438 \u0432 \u044d\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0448 \u0442\u0440\u044e\u043a. \u041a\u0430\u043a \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0435\u0431\u044f \u0432\u0435\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 hover? \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0435\u0437\u0436\u0430\u044e\u0442 .overlay \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c .caption, \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 hover \u0443 .overlay \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f 0s, \u0430 \u0443 .caption \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 0.3s <\/p>\n<pre><code class=\"css\">.effect:hover .caption {   top: 0px;   transition-delay: 0.3s; }    .effect:hover .overlay {   transition-delay: 0s; } <\/code><\/pre>\n<p>  \u041d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043d\u0438\u043c\u0430\u0435\u043c hover, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u043e\u0431\u044b\u0447\u043d\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430, \u0431\u0435\u0437 \u0432\u0441\u044f\u043a\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438, \u043d\u0430 \u043c\u0435\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f .caption, \u0430 \u0437\u0430\u0442\u0435\u043c \u2014 .overlay, \u0438, \u0437\u043d\u0430\u0447\u0438\u0442, \u0443 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c, \u0430 \u0432\u0442\u043e\u0440\u044b\u043c \u2014 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: -100%;   left: 0px;   background: transparent;   width: 100%;   height: 100%;   color: #fff;   transition: all 0.2s linear 0s; }  .effect .overlay {   background: rgba(0,0,0,0.7);   width: 100%;   height: 50%;   left: 0px;   position: absolute;   transition: all 0.15s linear 0.3s; } <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0441\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0430, \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435. <\/p>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #7.3<\/b> \u043f\u043e\u0447\u0442\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443, \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043b\u0438\u0448\u044c \u0432 \u0441\u0442\u0438\u043b\u044f\u0445 \u0434\u043b\u044f .overlay:<\/p>\n<pre><code class=\"css\">.effect .overlay {   background: rgba(0,0,0,0.7);   width: 50%;   height: 100%;   position: absolute;   transition: all 0.15s linear 0.4s; }  .effect .overlay-top {   left: 0;   top: -100%; }  .effect .overlay-bottom {   right: 0;   top: 100%; }  .effect:hover .overlay {   top: 0;   transition-delay: 0s; } <\/code><\/pre>\n<p>  <b>\u0421 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c #7.1<\/b> \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u043e\u0437\u0438\u0442\u044c\u0441\u044f \u0447\u0443\u0442\u044c \u0434\u043e\u043b\u044c\u0448\u0435. \u041a\u0430\u043a \u0438 #7.3, \u043e\u043d \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 #7.2 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0434\u043b\u044f .overlay, \u0432\u044b\u0435\u0437\u0436\u0430\u044e\u0449\u0438\u043c\u0438 \u0441\u0432\u0435\u0440\u0445\u0443 \u0441\u043f\u0440\u0430\u0432\u0430 \u0438 \u0441\u043d\u0438\u0437\u0443 \u0441\u043b\u0435\u0432\u0430 \u0434\u0432\u0443\u043c\u044f \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u043c\u0438. <\/p>\n<p>  \u041d\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0432\u044b\u0435\u0437\u0436\u0430\u0442\u044c \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u043d\u0435 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438. \u0412\u043e\u0442 \u043e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043e\u0431\u043e\u0438\u0445 .overlay: <\/p>\n<pre><code class=\"css\">.effect .overlay {   background: rgba(0,0,0,0.7);   width: 408px;   height: 170px;   position: absolute;   transform: rotate(33deg);   transition: all 0.15s linear 0.3s; } <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u0447\u0442\u043e \u0432\u0430\u0436\u043d\u043e: \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u0434 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c, \u0440\u0430\u0432\u043d\u043e \u043a\u0430\u043a \u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0438\u0445 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c (\u0438 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u043d\u0435\u043c). \u0427\u0442\u043e \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c: \u0431\u0435\u0440\u0435\u043c \u043d\u0430\u0448\u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043d\u0430 33 \u0433\u0440\u0430\u0434\u0443\u0441\u0430 \u043a\u0430\u0436\u0434\u044b\u0439, \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0441\u043c\u0435\u0449\u0430\u0435\u043c \u043a \u0432\u0435\u0440\u0445\u043d\u0435\u043c\u0443 \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u0443\u0433\u043b\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 .effect, \u043d\u0438\u0436\u043d\u0438\u0439 \u2014 \u043a \u043d\u0438\u0436\u043d\u0435\u043c\u0443 \u043b\u0435\u0432\u043e\u043c\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0430 \u043d\u0430 hover \u0441\u043c\u0435\u0449\u0430\u0435\u043c \u0438\u0445 \u0434\u043e \u0441\u043e\u043f\u0440\u0438\u043a\u043e\u0441\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u043f\u043e \u043b\u0438\u043d\u0438\u0438 \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 .effect:<\/p>\n<pre><code class=\"css\">.effect .overlay-top {   top: -158px;   left: 142px; }  .effect:hover .overlay-top {   top: -50px;   left: -1px;    }  .effect .overlay-bottom {   top: 192px;   left: -244px; }  .effect:hover .overlay-bottom {   top: 79px;   left: -111px; }  .effect:hover .overlay {   transition-delay: 0s; } <\/code><\/pre>\n<p>  \u041f\u0440\u043e\u0447\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b \u0441\u0442\u0438\u043b\u044f\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0432\u044b\u043a\u0438 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u0411\u043e\u043b\u044c\u0448\u0435 \u0442\u0440\u044e\u043a\u043e\u0432! \u042d\u0444\u0444\u0435\u043a\u0442\u044b #8.1-#10.3<\/h4>\n<p>  <b>#8.1-#8.3<\/b><\/p>\n<p>  <a href=\"http:\/\/fox-hover.co.uk\/basic-hover-pack\/#ef8\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<p>  \u0418\u0437\u044e\u043c\u0438\u043d\u043a\u0443 \u044d\u0442\u0438\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 bounce-\u044d\u0444\u0444\u0435\u043a\u0442, \u0441\u0442\u0440\u043e\u044f\u0449\u0438\u0439\u0441\u044f \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 transition-timing-function \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 transition \u0434\u043b\u044f .overlay.<\/p>\n<p>  html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0430\u043a\u043e\u0432\u0430:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;effect&quot;&gt;   &lt;img src=&quot;img\/ef8.jpg&quot; alt=&quot;Effect #8&quot; \/&gt;   &lt;div class=&quot;overlay&quot;&gt;&lt;\/div&gt;   &lt;div class=&quot;caption&quot;&gt;     &lt;h4&gt;Title is Here&lt;\/h4&gt;     &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.&lt;\/p&gt;     &lt;a class=&quot;btn&quot; href=&quot;#&quot; title=&quot;View More&quot;&gt;View More&lt;\/a&gt;   &lt;\/div&gt; &lt;\/div&gt;   <\/code><\/pre>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 .overlay \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u0438\u043d. \u0412\u043e\u0442 \u0442\u0430\u043a\u0438\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">.effect .overlay {   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   position: absolute;   top: 0px;   left: 0px;   transform: scale(0);   transition: all 0.4s cubic-bezier(0, 1.31, 1, -0.29) 0.4s; } <\/code><\/pre>\n<p>  \u041d\u0443 \u0430 \u043d\u0430 hover \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0435\u0433\u043e:<\/p>\n<pre><code class=\"css\">.effect:hover .overlay {   transform: scale(1);   transition-delay: 0s; } <\/code><\/pre>\n<p>  \u0427\u0442\u043e\u0431\u044b .caption \u043d\u0435 \u043e\u0442\u0432\u043b\u0435\u043a\u0430\u043b, \u0432\u0441\u0435, \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u2014 \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: transparent;   width: 100%;   height: 100%;   color: #fff;   opacity: 0;   transition: all 0.2s linear 0s; }  .effect:hover .caption {   opacity: 1;   transition-delay: 0.6s; }    <\/code><\/pre>\n<p>  \u041f\u0440\u043e\u0447\u0438\u0435 \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<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442\u044b #8.2-#8.3<\/b> \u0441\u0442\u0440\u043e\u044f\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e. \u0412\u0441\u044f \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043b\u0438\u0448\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 #8.2 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f scaleX(), \u0430 \u0432 #8.3 \u2014 scaleY(), \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0430 \u043f\u0440\u0438 \u0440\u0430\u0437\u0431\u043e\u0440\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 #3.1-#3.3<\/p>\n<p>  <b>#9.1-#9.3<\/b><\/p>\n<p>  <a href=\"http:\/\/fox-hover.co.uk\/basic-hover-pack\/#ef9\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #9.1<\/b> \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0432\u0430 .overlay \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \u0438\u0437 \u0446\u0435\u043d\u0442\u0440\u0430, \u0430 \u0441\u043b\u0435\u0434\u043e\u043c \u0437\u0430 \u043d\u0438\u043c\u0438 \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c bounce-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u0432\u044b\u0435\u0437\u0436\u0430\u0435\u0442 .caption. <\/p>\n<p>  \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, \u043e\u043d\u0430 \u0442\u0430\u043a\u043e\u0432\u0430:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;effect&quot;&gt;   &lt;img src=&quot;img\/ef9.jpg&quot; alt=&quot;Effect #9&quot; \/&gt;   &lt;div class=&quot;overlay overlay-1&quot;&gt;&lt;\/div&gt;   &lt;div class=&quot;overlay overlay-2&quot;&gt;&lt;\/div&gt;   &lt;div class=&quot;caption&quot;&gt;     &lt;h4&gt;Title is Here&lt;\/h4&gt;     &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.&lt;\/p&gt;     &lt;a class=&quot;btn&quot; href=&quot;#&quot; title=&quot;View More&quot;&gt;View More&lt;\/a&gt;   &lt;\/div&gt; &lt;\/div&gt;            <\/code><\/pre>\n<p>  \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f &lt;h4&gt;, &lt;p&gt; \u0438 &lt;a&gt; \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u043c\u0438. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f .overlay:<\/p>\n<pre><code class=\"css\">.effect .overlay {   background: rgba(0,0,0,0.35);   width: 100%;   height: 100%;   position: absolute;   top: 0px;   left: 0px;   transform: scale(0); } <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 .overlay-1 \u0438 .overlay-2 \u0432\u0441\u0442\u0443\u043f\u0430\u044e\u0442 \u0432 \u0440\u0430\u0437\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, transition \u0438\u043c \u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u2014 \u0441\u0432\u043e\u0439:<\/p>\n<pre><code class=\"css\">.effect .overlay-1 {   transition: all 0.2s linear 0.3s; }  .effect .overlay-2 {   transition: all 0.2s linear 0.6s; }  .effect:hover .overlay {   transform: scale(1); } <\/code><\/pre>\n<p>  \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0438 \u043f\u0440\u0438 \u0441\u043d\u044f\u0442\u0438\u0438 hover \u0438\u0441\u0447\u0435\u0437\u0430\u044e\u0442 \u043e\u043d\u0438 \u0441 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f .overlay-1 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u0438\u043c delay: 0s, \u0430 \u0434\u043b\u044f .overlay-2 \u2014 delay: 0.2s (\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0432\u043b\u0438\u044f\u043d\u0438\u0438 delay \u043d\u0430 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u044f \u043f\u0438\u0441\u0430\u043b\u0430 \u043f\u0440\u0438 \u0440\u0430\u0437\u0431\u043e\u0440\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 #7.1-#7.3)<\/p>\n<pre><code class=\"css\">.effect:hover .overlay-1 {   transition-delay: 0s; }  .effect:hover .overlay-2 {   transition-delay: 0.2s; } <\/code><\/pre>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u0442\u0438\u043b\u0438 .caption:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 100%;   background: transparent;   width: 100%;   height: 100%;   color: #fff;   transition: all 0.4s cubic-bezier(0.05, -0.24, 0, 1.33) 0s; }  .effect:hover .caption {   left: 0px;   transition-delay: 0.4s; }    <\/code><\/pre>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #9.2<\/b> \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u0442\u043e\u043b\u044c\u043a\u043e .overlay \u043a\u0440\u0443\u0433\u043b\u044b\u0435 \u0438 .caption, \u043a\u0430\u043a \u0438 .overlay, \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u0446\u0435\u043d\u0442\u0440\u0430:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: transparent;   width: 100%;   height: 100%;   color: #fff;   transition: all 0.3s linear 0s;   transform: scale(0); }  .effect:hover .caption {   transform: scale(1);   transition-delay: 0.4s; }        .effect .overlay {   background: rgba(0,0,0,0.35);   width: 2px;   height: 2px;   position: absolute;   top: 50%;   left: 50%;   border-radius: 50%;   transform: scale(0); }  .effect .overlay-1 {   transition: all 0.5s linear 0.3s; }  .effect .overlay-2 {   transition: all 0.5s linear 0.6s; } <\/code><\/pre>\n<p>  \u041f\u0440\u043e\u0447\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b \u0441\u0442\u0438\u043b\u044f\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u0430 #9.1<\/p>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #9.3<\/b> \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c. \u041d\u0443\u0436\u043d\u0430 \u0442\u0430\u043a\u0430\u044f html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;effect\u201d&gt;   &lt;img src=&quot;img\/ef9.jpg&quot; alt=&quot;Effect #9&quot; \/&gt;   &lt;div class=&quot;overlay&quot;&gt;&lt;\/div&gt;   &lt;div class=&quot;caption&quot;&gt;     &lt;h4&gt;Title is Here&lt;\/h4&gt;     &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.&lt;\/p&gt;     &lt;a class=&quot;btn&quot; href=&quot;#&quot; title=&quot;View More&quot;&gt;View More&lt;\/a&gt;   &lt;\/div&gt; &lt;\/div&gt;             <\/code><\/pre>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0438\u0434\u0430 \u0434\u043b\u044f .overlay, \u043c\u044b \u0434\u0430\u0434\u0438\u043c \u0435\u043c\u0443 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0443\u044e\u0441\u044f box-shadow:<\/p>\n<pre><code class=\"css\">.effect .overlay {   position: absolute;   top: 0px;   left: 0px;   right: 0px;   bottom: 0px;   transition: all 0.3s linear 0.3s; }  .effect:hover .overlay {   box-shadow: inset 0px 0px 25px 100px rgba(0,0,0,0.7); } <\/code><\/pre>\n<p>  \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f .caption \u0431\u0443\u0434\u0435\u0442: \u0440\u0430\u0437\u0432\u043e\u0440\u043e\u0442 \u043d\u0430 180 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432 \u0438 opacity: 0. \u041d\u0430 hover \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c .caption, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: transparent;   width: 100%;   height: 100%;   color: #fff;   opacity: 0;   transform: rotate(180deg);   transition: all 0.3s linear 0s; }  .effect:hover .caption {   opacity: 1;   transform: rotate(0deg);   transition-delay: 0.5s; }  <\/code><\/pre>\n<p>  \u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u2014 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435.<\/p>\n<p>  <b>#10.1-#10.3<\/b><\/p>\n<p>  <a href=\"http:\/\/fox-hover.co.uk\/basic-hover-pack\/#ef10\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #10.1<\/b> \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043f\u044f\u0442\u0438 \u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440 \u201c\u043b\u0435\u0441\u0435\u043d\u043a\u043e\u0439\u201d \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 .overlay \u0438, \u0441\u043b\u043e\u0432\u043d\u043e \u0432\u044b\u043d\u044b\u0440\u0438\u0432\u0430\u044e\u0449\u0435\u0433\u043e, .caption.<\/p>\n<p>  html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043d\u0443\u0436\u043d\u0430 \u0442\u0430\u043a\u0430\u044f:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;effect&quot;&gt;   &lt;img src=&quot;img\/ef10.jpg&quot; alt=&quot;Effect #10&quot; \/&gt;   &lt;div class=&quot;overlay overlay-1&quot;&gt;&lt;\/div&gt;   &lt;div class=&quot;overlay overlay-2&quot;&gt;&lt;\/div&gt;   &lt;div class=&quot;overlay overlay-3&quot;&gt;&lt;\/div&gt;   &lt;div class=&quot;overlay overlay-4&quot;&gt;&lt;\/div&gt;   &lt;div class=&quot;overlay overlay-5&quot;&gt;&lt;\/div&gt;   &lt;div class=&quot;caption&quot;&gt;     &lt;h4&gt;Title is Here&lt;\/h4&gt;     &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.&lt;\/p&gt;     &lt;a class=&quot;btn&quot; href=&quot;#&quot; title=&quot;View More&quot;&gt;View More&lt;\/a&gt;   &lt;\/div&gt; &lt;\/div&gt;           <\/code><\/pre>\n<p>  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043c \u201c\u043b\u0435\u0441\u0435\u043d\u043a\u0443\u201d. \u041a\u0430\u0436\u0434\u044b\u0439 .overlay \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0441\u0432\u043e\u0438\u043c \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 delay:<\/p>\n<pre><code class=\"css\">.effect .overlay {   background: rgba(0,0,0,0.7);   width: 20%;   height: 100%;   position: absolute;   top: 100%; }  .effect .overlay-1 {   left: 0;   transition: all 0.15s linear 0.2s; }  .effect .overlay-2 {   left: 20%;   transition: all 0.15s linear 0.25s; }  .effect .overlay-3 {   left: 40%;   transition: all 0.15s linear 0.3s; }  .effect .overlay-4 {   left: 60%;   transition: all 0.15s linear 0.35s; }  .effect .overlay-5 {   left: 80%;   transition: all 0.15s linear 0.4s; }  <\/code><\/pre>\n<p>  \u041d\u0430 hover \u0438\u0445 delay \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f:<\/p>\n<pre><code class=\"css\">.effect:hover .overlay {   top: 0px; }  .effect:hover .overlay-1 {   transition-delay: 0s; }   .effect:hover .overlay-2 {   transition-delay: 0.1s; }  .effect:hover .overlay-3 {   transition-delay: 0.15s; }  .effect:hover .overlay-4 {   transition-delay: 0.2s; }  .effect:hover .overlay-5 {   transition-delay: 0.25s; } <\/code><\/pre>\n<p>  \u0421\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0435 \u0437\u0434\u0435\u0441\u044c \u2014 .caption. \u0412\u043e\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043d\u0435\u0433\u043e:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: transparent;   width: 100%;   height: 100%;   color: #fff;   transition: all 0.3s linear 0s; } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c, \u0432\u0435\u0434\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0432\u043e\u0434\u0438\u043c \u043c\u044b\u0448\u044c, \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u043a\u0430\u043a .caption \u043f\u0440\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0433\u043e\u043b. \u0417\u0430\u0434\u0430\u0434\u0438\u043c \u0438 transform-origin, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0439 \u0442\u043e\u0447\u043a\u0443, \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f. \u0414\u043e\u0431\u0430\u0432\u0438\u043c <b>transform: rotate(-50deg);<\/b> \u0438 <b>transform-origin: 0% 100%;<\/b>. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u201c\u0432\u044b\u043d\u044b\u0440\u0438\u0432\u0430\u043d\u0438\u0435\u201d. \u0421\u043c\u0435\u0449\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e transform: translate(x,y), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u043e\u0441\u0438 X \u0438 Y \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u041d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u044c .caption \u043f\u043e\u0447\u0442\u0438 \u0432 \u0441\u0430\u043c\u044b\u0439 \u0443\u0433\u043e\u043b \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043d\u0430 \u0434\u0432\u0435 \u0442\u0440\u0435\u0442\u0438 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 .effects \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: transparent;   width: 100%;   height: 100%;   color: #fff;   transform: rotate(-50deg) translate(-101px,291px);   transform-origin: 0% 100%;   transition: all 0.3s linear 0s; } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u0441\u043a\u0440\u044b\u0442\u044c .caption \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u043d\u0435 \u043d\u0430\u0432\u0435\u0434\u0443\u0442 \u043c\u044b\u0448\u044c. \u0412 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043c\u044b \u0441\u043f\u0440\u044f\u0447\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <b>height: 0px;<\/b> \u0438 <b>overflow: hidden;<\/b>. \u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0442\u0430\u043a\u0438\u0435:<\/p>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: transparent;   width: 100%;   height: 0px;   overflow: hidden;   color: #fff;   transform: rotate(-50deg) translate(-101px,291px);   transform-origin: 0% 100%;   transition: all 0.3s linear 0s; } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u044f\u0432\u0438\u0442\u044c .caption \u043d\u0430 hover, \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0433\u043e \u0432\u044b\u0441\u043e\u0442\u0443, \u043f\u043e\u0432\u0435\u0440\u043d\u0435\u043c \u0434\u043e rotate(0deg) \u0438 \u0432\u0435\u0440\u043d\u0435\u043c \u043d\u0430 \u043c\u0435\u0441\u0442\u043e \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438:<\/p>\n<pre><code class=\"css\">effect:hover .caption {   height: 100%;   transform: rotate(0deg) translate(0px,0px);   transition-delay: 0.3s; } <\/code><\/pre>\n<p>  \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f &lt;h4&gt;, &lt;p&gt; \u0438 &lt;a&gt; \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c\u0438. <\/p>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #10.2<\/b> \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u043d\u0430 \u0434\u0432\u0443\u0445 .overlay, \u0432\u044b\u0435\u0437\u0436\u0430\u044e\u0449\u0438\u0445 \u0438\u0437 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0438 \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u0443\u0433\u043b\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430 \u201c\u0432\u044b\u043f\u0430\u0434\u0430\u043d\u0438\u0438\u201d \u0441\u0432\u0435\u0440\u0445\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 &lt;h4&gt;, &lt;p&gt; \u0438 &lt;a&gt;.<\/p>\n<p>  html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043d\u0443\u0436\u043d\u0430 \u0442\u0430\u043a\u0430\u044f: <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;effect&quot;&gt;   &lt;img src=&quot;img\/ef10.jpg&quot; alt=&quot;Effect #10&quot; \/&gt;   &lt;div class=&quot;overlay overlay-1&quot;&gt;&lt;\/div&gt;   &lt;div class=&quot;overlay overlay-2&quot;&gt;&lt;\/div&gt;   &lt;div class=&quot;caption&quot;&gt;     &lt;h4&gt;Title is Here&lt;\/h4&gt;     &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.&lt;\/p&gt;     &lt;a class=&quot;btn&quot; href=&quot;#&quot; title=&quot;View More&quot;&gt;View More&lt;\/a&gt;   &lt;\/div&gt; &lt;\/div&gt;    <\/code><\/pre>\n<p>  \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043b\u0435\u0432\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e .overlay, \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0439 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u043e\u0439:<\/p>\n<pre><code class=\"css\">.effect .overlay-1 {   position: absolute;   top: 0px;   left: 0px;   background: rgba(0,0,0,0.7);   width: 0px;   height: 0px;   overflow: hidden;   transition: all 0.3s linear 0.3s; }  .effect:hover .overlay-1 {   width: 100%;   height: 100%;   transition-delay: 0s; }  <\/code><\/pre>\n<p>  \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435 \u0441 \u043d\u0438\u0436\u043d\u0438\u043c \u043f\u0440\u0430\u0432\u044b\u043c. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0448\u0438\u0440\u0438\u043d\u0430 border \u0440\u0430\u0432\u043d\u0430 4px, \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0435 \u0438 \u0432\u044b\u0441\u043e\u0442\u0435 \u043f\u043e 100% \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u043d\u0443\u0436\u043d\u043e \u043a\u043e\u043c\u043f\u0435\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e 8px \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0447\u0435\u043c \u043d\u0430\u043c \u0438 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 calc:<\/p>\n<pre><code class=\"css\">effect .overlay-2 {   position: absolute;   bottom: 0px;   right: 0px;   background: transparent;   border: 4px double #fff;   width: 0px;   height: 0px;   opacity: 0;   transition: all 0.3s linear 0.3s; }  .effect:hover .overlay-2 {   width: 100%;   max-width: calc(100% - 8px);   height: 100%;   max-height: calc(100% - 8px);   opacity: 1;   transition-delay: 0s; }   <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a .caption \u0438 \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443. \u0414\u043b\u044f .caption \u0441\u0442\u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c\u0438, \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u0441\u044f \u043e\u043d\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 &lt;h4&gt;, &lt;p&gt; \u0438 &lt;a&gt;, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0432\u0435\u0440\u0445. \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043d\u0435 \u043d\u0430\u043b\u0435\u0437\u0430\u043b \u043d\u0430 border \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435\u043c, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0435\u043c\u0443 \u0448\u0438\u0440\u0438\u043d\u0443, \u043a\u0430\u043a \u0438 .overlay-2:<\/p>\n<pre><code class=\"css\">.effect .caption h4 {   font-size: 21px;   font-weight: 700;   text-transform: uppercase;   text-align: center;   border-bottom: 1px solid white;   padding-bottom: 20px;   margin: 20px auto 0px auto;   width: calc(100% - 8px);   position: relative;   top: -100%;   transition: all 0.3s linear 0.2s; }  .effect .caption p {   margin: 15px 0px;   text-align: center;   font-style: italic;   padding: 0px 10px;   position: relative;   top: -100%;   transition: all 0.3s linear 0.1s; }  .effect .caption a.btn {   width: 120px;   text-align: center;   display: block;   background: #68432d;   color: #fff;   padding: 10px 0px;   border-radius: 5px;   margin: 0px auto 0px auto;   position: relative;   top: -100%;;   transition: all 0.3s linear 0s; } <\/code><\/pre>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043b\u0438\u0448\u044c, \u0447\u0442\u043e\u0431 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043e\u043f\u0443\u0441\u043a\u0430\u043b\u0438\u0441\u044c \u043d\u0430 hover, \u043f\u0440\u0438\u0447\u0435\u043c \u0432 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u043c \u043d\u0430\u043c\u0438 \u043f\u043e\u0440\u044f\u0434\u043a\u0435:<\/p>\n<pre><code class=\"css\">.effect:hover .caption a.btn, .effect:hover .caption p, .effect:hover .caption h4 {   top: 0px; }  .effect:hover .caption a.btn {   transition-delay: 0.3s; }  .effect:hover .caption p {   transition-delay: 0.4s; }  .effect:hover .caption h4 {   transition-delay: 0.5s; }                   <\/code><\/pre>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442 #10.3<\/b> \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0443\u0433\u043b\u0430 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 .caption \u043d\u0430 hover.<\/p>\n<p>  html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043d\u0443\u0436\u043d\u0430 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0430\u044f, \u0440\u0430\u0432\u043d\u043e \u043a\u0430\u043a \u0438 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f &lt;h4&gt;, &lt;p&gt; \u0438 &lt;a&gt;. \u0410 \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438:<\/p>\n<pre><code class=\"css\">.effect img {   width: 100%;   height: 100%;   transition: all 0.25s linear 0.3s;   transform: scale(1);  }  .effect:hover img {   transform: scale(1.3);    transition-delay: 0s; } <\/code><\/pre>\n<p>  \u041d\u0443 \u0430 \u0447\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f .caption \u2014 \u0437\u0430\u0434\u0430\u0447\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b, \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0432 \u0435\u0433\u043e \u043d\u0430 30 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432, \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0430\u0432\u044b\u0439 \u043d\u0438\u0436\u043d\u0438\u0439 \u0443\u0433\u043e\u043b \u0441 \u043f\u0440\u0430\u0432\u044b\u043c \u043d\u0438\u0436\u043d\u0438\u043c \u0443\u0433\u043b\u043e\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438\u0441\u0447\u0435\u0437\u043d\u0443\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043d\u0438\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438. \u0410 \u0435\u0433\u043e transition, \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0447\u0430\u0441\u0442\u0435\u0439:<\/p>\n<ol>\n<li>opacity \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u0436\u0435, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0432\u043e\u0434\u0438\u043c \u043c\u044b\u0448\u044c, \u0437\u0430 \u043e\u0447\u0435\u043d\u044c \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. opacity 0.1s linear 0s <\/li>\n<li>\u0434\u043b\u044f transform \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043d\u0430 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0434\u043b\u044f \u043f.1, \u0438 transition-timing-function, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u0439 \u0438\u043b\u043b\u044e\u0437\u0438\u044e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0437\u0430\u043c\u0430\u0445\u0430: transform 0.35s cubic-bezier(0.49, -0.19, 0.7, -0.01) 0.1s<\/li>\n<\/ol>\n<pre><code class=\"css\">.effect .caption {   position: absolute;   top: 0px;   left: 0px;   background: rgba(0,0,0,0.7);   width: 100%;   height: 100%;   color: #fff;   opacity: 0;   transform: rotate(30deg) translate(30px,-89px);   transition: transform 0.35s cubic-bezier(0.49, -0.19, 0.7, -0.01) 0.1s, opacity 0.1s linear 0s; }  .effect:hover .caption {   transform: rotate(0deg) translate(0px,0px);   opacity: 1;   transition-delay: 0.3s; }        <\/code><\/pre>\n<p>  \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439!             <\/p>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/265451\/\"> http:\/\/habrahabr.ru\/post\/265451\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>             \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u043c\u0430\u043d\u0443\u0430\u043b\u0430, \u043c\u043e\u0435\u0439 \u0446\u0435\u043b\u044c\u044e \u0431\u044b\u043b\u043e \u0432\u0437\u044f\u0442\u044c \u0442\u0440\u0438 \u0434\u0435\u0441\u044f\u0442\u043a\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u0447\u0430\u0441\u0442\u044c\u044e \u2014 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445, \u0447\u0430\u0441\u0442\u044c\u044e \u2014 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u043d\u044b\u0445 \u043c\u043d\u043e\u0439, \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438\u0445 \u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043a \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u043c, \u0438 \u043d\u0430 \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u043e\u0432\u0438\u0447\u043a\u0430\u043c, \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u043c\u0435\u0432\u0448\u0438\u043c \u0434\u0435\u043b\u043e \u0441 CSS3 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438, \u043a\u0430\u043a \u044d\u0442\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0438 \u043a\u0430\u043a \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e \u044d\u0442\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0441\u0442\u0430\u0442\u044c\u044f \u0432\u044b\u0448\u043b\u0430 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f, \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u0430\u044f, \u043c\u043d\u0435 \u0431\u044b\u043b\u043e \u0432\u0430\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u0434\u0435\u0442\u0430\u043b\u044c. <\/p>\n<p>  \u0414\u0435\u043c\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u043b\u0435\u0436\u0430\u0442 <a href=\"http:\/\/fox-hover.co.uk\/basic-hover-pack\/\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  <b>\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<p>  <b>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043a \u0440\u0430\u0431\u043e\u0442\u0435.<\/b><\/p>\n<p>  \u0418\u0442\u0430\u043a, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u0430\u044f <b>html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430<\/b>:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;effect&gt;   &lt;img src=&quot;img\/ef1.jpg&quot; alt=&quot;Effect #1&quot; \/&gt;   &lt;div class=&quot;caption&quot;&gt;     &lt;h4&gt;Title is Here&lt;\/h4&gt;     &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.&lt;\/p&gt;     &lt;a class=&quot;btn&quot; href=&quot;#&quot; title=&quot;View More&quot;&gt;View More&lt;\/a&gt;   &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  <\/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-264305","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/264305","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=264305"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/264305\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=264305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=264305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=264305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}