(One intermediate revision by the same user not shown) | |||
Line 2,221: | Line 2,221: | ||
<!---Mask effects---> | <!---Mask effects---> | ||
.view { | .view { | ||
− | width: | + | width: 300px; |
− | height: | + | height: 200px; |
margin: 10px; | margin: 10px; | ||
float: left; | float: left; | ||
Line 2,233: | Line 2,233: | ||
} | } | ||
.view .mask, .view .content { | .view .mask, .view .content { | ||
− | width: | + | width: 300px; |
− | height: | + | height: 200px; |
position: absolute; | position: absolute; | ||
overflow: hidden; | overflow: hidden; | ||
Line 2,290: | Line 2,290: | ||
-ms-transition-delay: 0.3s; | -ms-transition-delay: 0.3s; | ||
transition-delay: 0.3s; | transition-delay: 0.3s; | ||
+ | } | ||
+ | <!--Hoverbox--> | ||
+ | .hvrbox * { | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | .hvrbox { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | .hvrbox img { | ||
+ | max-width: 100%; | ||
+ | } | ||
+ | .hvrbox .hvrbox-layer_bottom { | ||
+ | display: block; | ||
+ | } | ||
+ | .hvrbox .hvrbox-layer_top { | ||
+ | opacity: 0; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background: rgba(0, 0, 0, 0.6); | ||
+ | color: #fff; | ||
+ | padding: 15px; | ||
+ | -moz-transition: all 0.4s ease-in-out 0s; | ||
+ | -webkit-transition: all 0.4s ease-in-out 0s; | ||
+ | -ms-transition: all 0.4s ease-in-out 0s; | ||
+ | transition: all 0.4s ease-in-out 0s; | ||
+ | } | ||
+ | .hvrbox:hover .hvrbox-layer_top, | ||
+ | .hvrbox.active .hvrbox-layer_top { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .hvrbox .hvrbox-text { | ||
+ | text-align: center; | ||
+ | font-size: 18px; | ||
+ | display: inline-block; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | -moz-transform: translate(-50%, -50%); | ||
+ | -webkit-transform: translate(-50%, -50%); | ||
+ | -ms-transform: translate(-50%, -50%); | ||
+ | transform: translate(-50%, -50%); | ||
+ | } | ||
+ | .hvrbox .hvrbox-text_mobile { | ||
+ | font-size: 15px; | ||
+ | border-top: 1px solid rgb(179, 179, 179); /* for old browsers */ | ||
+ | border-top: 1px solid rgba(179, 179, 179, 0.7); | ||
+ | margin-top: 5px; | ||
+ | padding-top: 2px; | ||
+ | display: none; | ||
+ | } | ||
+ | .hvrbox.active .hvrbox-text_mobile { | ||
+ | display: block; | ||
} | } | ||
Latest revision as of 19:22, 17 October 2018