Line 6: | Line 6: | ||
</head> | </head> | ||
<style> | <style> | ||
+ | .portfolio-item { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | overflow: hidden; | ||
+ | max-width: 530px; | ||
+ | margin: auto auto 1rem; | ||
+ | } | ||
+ | .portfolio-item .caption { | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | background-color: rgba(33, 37, 41, 0.2); | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .portfolio-item .caption .caption-content { | ||
+ | color: #fff; | ||
+ | margin: auto 1rem 1rem; | ||
+ | } | ||
+ | |||
+ | .portfolio-item .caption .caption-content h2 { | ||
+ | font-size: 2rem; | ||
+ | /*text-transform: uppercase;*/ | ||
+ | } | ||
+ | |||
+ | .portfolio-item .caption .caption-content p { | ||
+ | font-weight: 400; | ||
+ | font-size: 1.2rem; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 992px) { | ||
+ | .portfolio-item { | ||
+ | max-width: none; | ||
+ | margin: 0; | ||
+ | } | ||
+ | .portfolio-item .caption { | ||
+ | -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s; | ||
+ | -webkit-clip-path: inset(0px); | ||
+ | clip-path: inset(0px); | ||
+ | } | ||
+ | .portfolio-item .caption .caption-content { | ||
+ | -webkit-transition: opacity 0.25s; | ||
+ | transition: opacity 0.25s; | ||
+ | margin-left: 2.5rem; | ||
+ | margin-right: 2.5rem; | ||
+ | margin-bottom: 3rem; | ||
+ | } | ||
+ | .portfolio-item img { | ||
+ | -webkit-transition: -webkit-clip-path 0.25s ease-out; | ||
+ | -webkit-clip-path: inset(-1px); | ||
+ | clip-path: inset(-1px); | ||
+ | } | ||
+ | .portfolio-item:hover img { | ||
+ | -webkit-clip-path: inset(2rem); | ||
+ | clip-path: inset(2rem); | ||
+ | } | ||
+ | .portfolio-item:hover .caption { | ||
+ | background-color: rgba(29, 128, 159, 0.9); | ||
+ | -webkit-clip-path: inset(2rem); | ||
+ | clip-path: inset(2rem); | ||
+ | } | ||
+ | } | ||
</style> | </style> | ||
Revision as of 07:03, 8 October 2018