Оригінальний ефект css3 при наведенні на

lt;div class="Main"gt;lt;div class="View view-first"gt;lt;img src="Images / 1.jpg"gt;lt;div class="Mask"gt;lt;h2gt; Hover Style # 1lt;/h2gt;lt;pgt; A wonderful serenity has taken possession ofmy entire soul, like these sweet mornings of spring which I enjoy withmy whole heart.lt;/pgt;lt;a href="#" class="Info"gt; Read Morelt;/agt;lt;/divgt;lt;/divgt;lt;div class="View view-first"gt;lt;img src="Images / 2.jpg"gt;lt;div class="Mask"gt;lt;h2gt; Hover Style # 1lt;/h2gt;lt;pgt; A wonderful serenity has taken possession ofmy entire soul, like these sweet mornings of spring which I enjoy withmy whole heart.lt;/pgt;lt;a href="#" class="Info"gt; Read Morelt;/agt;lt;/divgt;lt;/divgt;lt;div class="View view-first"gt;lt;img src="Images / 3.jpg"gt;lt;div class="Mask"gt;lt;h2gt; Hover Style # 1lt;/h2gt;lt;pgt; A wonderful serenity has taken possession ofmy entire soul, like these sweet mornings of spring which I enjoy withmy whole heart.lt;/pgt;lt;a href="#" class="Info"gt; Read Morelt;/agt;lt;/divgt;lt;/divgt;lt;div class="View view-first"gt;lt;img src="Images / 4.jpg"gt;lt;div class="Mask"gt;lt;h2gt; Hover Style # 1lt;/h2gt;lt;pgt; A wonderful serenity has taken possession ofmy entire soul, like these sweet mornings of spring which I enjoy withmy whole heart.lt;/pgt;lt;a href="#" class="Info"gt; Read Morelt;/agt;lt;/divgt;lt;/divgt;lt;/divgt;

.view-first img {-webkit-transition: all 0.2s linear--moz-transition: all 0.2s linear--o-transition: all 0.2s linear--ms-transition: all 0.2s linear-transition: all 0.2s linear-}.view-first .mask {-ms-filter: "Progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"-filter: alpha(opacity=0)-opacity: 0-background-color: rgba(219,127,8, 0.7)--webkit-transition: all 0.4s ease-in-out--moz-transition: all 0.4s ease-in-out--o-transition: all 0.4s ease-in-out--ms-transition: all 0.4s ease-in-out-transition: all 0.4s ease-in-out-}.view-first h2 {-webkit-transform: translateY(-100px)--moz-transform: translateY(-100px)--o-transform: translateY(-100px)--ms-transform: translateY(-100px)-transform: translateY(-100px)--ms-filter: "Progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"-filter: alpha(opacity=0)-opacity: 0--webkit-transition: all 0.2s ease-in-out--moz-transition: all 0.2s ease-in-out--o-transition: all 0.2s ease-in-out--ms-transition: all 0.2s ease-in-out-transition: all 0.2s ease-in-out-}.view-first p {-webkit-transform: translateY(100px)--moz-transform: translateY(100px)--o-transform: translateY(100px)--ms-transform: translateY(100px)-transform: translateY(100px)--ms-filter: "Progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"-filter: alpha(opacity=0)-opacity: 0--webkit-transition: all 0.2s linear--moz-transition: all 0.2s linear--o-transition: all 0.2s linear--ms-transition: all 0.2s linear-transition: all 0.2s linear-}.view-first: hover img {-webkit-transform: scale(1.1,1.1)--moz-transform: scale(1.1,1.1)--o-transform: scale(1.1,1.1)--ms-transform: scale(1.1,1.1)-transform: scale(1.1,1.1)-}.view-first a.info {-ms-filter: "Progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"-filter: alpha(opacity=0)-opacity: 0--webkit-transition: all 0.2s ease-in-out--moz-transition: all 0.2s ease-in-out--o-transition: all 0.2s ease-in-out--ms-transition: all 0.2s ease-in-out-transition: all 0.2s ease-in-out-}.view-first: hover .mask {-ms-filter: "Progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"-filter: alpha(opacity=100)-opacity: 1-}.view-first: hover h2,.view-first: hover p,.view-first: hover a.info {-ms-filter: "Progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"-filter: alpha(opacity=100)-opacity: 1--webkit-transform: translateY(0px)--moz-transform: translateY(0px)--o-transform: translateY(0px)--ms-transform: translateY(0px)-transform: translateY(0px)-}.view-first: hover p {-webkit-transition-delay: 0.1s--moz-transition-delay: 0.1s--o-transition-delay: 0.1s--ms-transition-delay: 0.1s-transition-delay: 0.1s-}.view-first: hover a.info {-webkit-transition-delay: 0.2s--moz-transition-delay: 0.2s--o-transition-delay: 0.2s--ms-transition-delay: 0.2s-transition-delay: 0.2s-}.view {width: 300px-height: 200px-margin: 10px-float: left-border: 10px solid #fff-overflow: hidden-position: relative-text-align: center--webkit-box-shadow: 1px 1px 2px # e6e6e6--moz-box-shadow: 1px 1px 2px # e6e6e6-box-shadow: 1px 1px 2px # e6e6e6-cursor: default-}.view .mask,.view .content {width: 300px-height: 200px-position: absolute-overflow: hidden-top: 0-left: 0-}.view img {display: block-position: relative-}.view h2 {text-transform: uppercase-color: #fff-text-align: center-position: relative-font-size: 17px-padding: 10px-background: rgba(0, 0, 0, 0.8)-margin: 20px 0 0 0-}.view p {font-family: Georgia, serif-font-style: italic-font-size: 12px-position: relative-color: #fff-padding: 10px 20px 20px-text-align: center-}.view a.info {display: inline-block-text-decoration: none-padding: 7px 14px-background: # 000-color: #fff-text-transform: uppercase--webkit-box-shadow: 0 0 1px # 000--moz-box-shadow: 0 0 1px # 000-box-shadow: 0 0 1px # 000-}.view a.info: hover {-webkit-box-shadow: 0 0 5px # 000--moz-box-shadow: 0 0 5px # 000-box-shadow: 0 0 5px # 000-}