(5 intermediate revisions by the same user not shown) | |||
Line 2,291: | Line 2,291: | ||
transition-delay: 0.3s; | transition-delay: 0.3s; | ||
} | } | ||
− | + | <!--Hoverbox--> | |
− | . | + | .hvrbox * { |
− | + | box-sizing: border-box; | |
− | + | ||
− | + | ||
} | } | ||
− | . | + | .hvrbox { |
− | display: block; | + | position: relative; |
− | max-width: 100%; | + | display: inline-block; |
− | height: auto; | + | overflow: hidden; |
+ | max-width: 100%; | ||
+ | height: auto; | ||
} | } | ||
− | . | + | .hvrbox img { |
− | + | max-width: 100%; | |
− | + | ||
− | width: 100% | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .hvrbox .hvrbox-layer_bottom { |
− | opacity: 1; | + | 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; | ||
+ | } | ||
+ | |||
+ | |||
</style> | </style> | ||
Latest revision as of 19:22, 17 October 2018