/** * @file * Visual styles for Magazine+'s images overlay. */ .overlay-container { position: relative; display: block; overflow: hidden; } .image-preview .overlay-container { max-width: 100%; float: left; } .overlay-container.overlay-container--circle { border-radius: 100%; } .overlay-container--circle img { border-radius: 100%; } .overlay { position: absolute; bottom: 7px; left: 7px; right: 7px; top: 7px; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; z-index: 10; } .overlay--fit { left: 0; right: 0; top: 0%; bottom: 0; } .overlay-container:hover .overlay--fit { bottom: 7px; left: 7px; right: 7px; top: 7px; } .overlay-container.overlay-container--circle .overlay { border-radius: 100%; } .overlay--visible { opacity: 1; filter: alpha(opacity=100); -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } .overlay-target-link { position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; right: 0; top: 0; } .overlay--white { background-color: rgba(255, 255, 255, 0.6); } .overlay-inner { position: absolute; height: 0; top: 50%; margin-top: -20px; left: 0; width: 100%; text-align: center; } .overlay-container .overlay-content { position: absolute; bottom: 20px; left: 20px; padding-right: 20px; z-index: 10; } .overlay-container .overlay-content .views-field-field-mt-post-category a { padding: 5px 20px; font-size: 12px; text-transform: uppercase; background-color: #ffffff; display: inline-block; color: #373737; } .overlay-container .overlay-content .views-field-field-mt-post-category a:hover { background-color: rgba(255, 255, 255, 0.8); } .overlay-container .overlay-content .views-field-title h5 { font-size: 30px; line-height: 1.25; margin-top: 10px; } .overlay-container .overlay-content .views-field-title h5 a { color: #ffffff; } .overlay-inner a.overlay-title { font-size: 24px; display: inline-block; color: #ffffff; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: transparent; margin: 0 10px 5px; text-decoration: none; } .headings-wide-spacing-enabled .overlay-inner a.overlay-title { letter-spacing: 0.25em; text-transform: uppercase; } .overlay-inner a.overlay-title:hover { border-bottom-color: #ffffff; } .overlay-inner .overlay-icons-list { display: block; } .overlay-inner .overlay-icons-list ul { margin: 0; } .overlay-inner .overlay-icons-list a { color: #ffffff; } .overlay-inner .overlay-icons-list ul li i { font-size: 14px; } .overlay-inner .overlay-link { color: #ffffff; display: inline-block; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: transparent; } .overlay-inner .overlay-link:hover { border-bottom-color: #ffffff; } .overlay-inner .overlay-subtitle { font-size: 15px; color: #ffffff; display: block; } .overlay-caption-container { position: absolute; height: 0; top: 50%; left: 0; margin-top: -32px; width: 100%; } .overlay-caption { padding: 20px 0; display: block; font-size: 14px; text-align: center; text-decoration: none; } .overlay-caption:hover { color: #ffffff; } .overlay-caption--black { background-color: rgba(0,0,0,0.8); color: #ffffff; position: relative; } .overlay-caption--black:before { content: ""; background-color: transparent; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .overlay-icon { display: inline-block; font-size: 35px; text-align: center; line-height: 70px; color: #ffffff; } .overlay-icon:hover { color: #ffffff; } .overlay-icon--small { font-size: 20px; } .overlay-icon--button { font-size: 15px; width: 40px; height: 40px; margin: 0 10px; border-width: 1px; border-style: solid; border-color: transparent; background-color: rgba(255, 255, 255, 0.1); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; line-height: 38px; color: #ffffff; } .overlay-icon--button:hover, .region--light-typography .overlay-icon--button:hover { border-color: #ffffff; background-color: #ffffff; color: #2d2d2d; } .overlay .button { padding: 15px 20px; } .overlay .button i { padding-right: 15px; } .overlay-container:hover { text-decoration: none; } .overlay-container:hover .overlay-caption--black { background-color: transparent; } .overlay-container:hover .overlay-caption--black:before { top: -375px; height: 750px; background-color: rgba(0,0,0,0.8); -webkit-transition: all 0.7s linear; -o-transition: all 0.7s linear; transition: all 0.7s linear; } .overlay-container:hover .overlay-caption { -ms-transform: scale(2); -webkit-transform: scale(2); transform: scale(2); } .overlay-container:hover .overlay { opacity: 1; filter: alpha(opacity=100); } .overlay-animated { -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .overlay-fade-left { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } .overlay-fade-right { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } .overlay-fade-top { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } .overlay-fade-bottom { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } .overlay-container:hover .overlay-fade-left { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } .overlay-container:hover .overlay-fade-right { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } .overlay-container:hover .overlay-fade-top { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .overlay-container:hover .overlay-fade-bottom { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }