Last active
September 9, 2015 01:05
-
-
Save benjaminwy/1dd378c8f8f9ab775b63 to your computer and use it in GitHub Desktop.
Scent caption overlay effect
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Turn the background image grayscale; doesn't work in old versions of IE */ | |
| #page-55ce14b0e4b033a227a7cb0e div.sqs-block.image-block.sqs-block-image:hover img.thumb-image.loaded { | |
| -webkit-filter: grayscale(1); | |
| filter: gray; | |
| filter: grayscale(1); | |
| filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale"); | |
| transition: all ease-in-out .25s; | |
| -webkit-transition: all ease-in-out .25s; | |
| -moz-transition: all ease-in-out .25s; | |
| } | |
| /* Make caption wrapper fill the entire image & overlay a dark background color */ | |
| #page-55ce14b0e4b033a227a7cb0e .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic div.image-caption-wrapper { | |
| top: 0; | |
| padding: 0; | |
| background: rgba(0, 0, 0, 0.85); /* Modify 0.85 to increase/decrease opacity */ | |
| transition: all ease-in-out .25s; | |
| -webkit-transition: all ease-in-out .25s; | |
| -moz-transition: all ease-in-out .25s; | |
| } | |
| /* Make link element fill entire image */ | |
| #page-55ce14b0e4b033a227a7cb0e .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper p a { | |
| text-decoration: none; | |
| display: table; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Center subtitle text vertically and horizontally & adjust font */ | |
| #page-55ce14b0e4b033a227a7cb0e .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper p a em { | |
| color: #fff; | |
| font-size: 14px; | |
| display: block; | |
| display: table-cell; | |
| vertical-align: middle; | |
| text-align: center; | |
| } | |
| /* Adjust size/position for phones */ | |
| @media only screen and (max-device-width: 480px) { | |
| #page-55ce14b0e4b033a227a7cb0e .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper p a em { | |
| font-size: 11px; | |
| padding: 20px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment