.penci-image-box { .penci-featured-ct { display: inline-block; margin-bottom: 20px; .penci-fea-in { height: 320px; position: relative; overflow: hidden; &:before, &:after { position: absolute; left: 5px; right: 5px; top: 5px; bottom: 5px; content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.4s; transition: opacity 0.3s, transform 0.4s; z-index: 5; } &.boxes-style-2 { &:before, &:after { content: none !important; display: none !important; } } &:before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0, 1); transform: scale(0, 1); } &:after { border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1, 0); transform: scale(1, 0); } &:hover { &:before, &:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } } } .penci-fea-in { .fea-box-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 1; background-size: cover; background-repeat: no-repeat; background-position: center center; &:before { top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 2; content: ""; background: #000; transition: opacity 0.25s; -webkit-transition: opacity 0.25s; -moz-transition: opacity 0.25s; opacity: 0; } } &:hover .fea-box-img:before { opacity: 0.3; } &.boxes-style-2 .fea-box-img { right: 0; bottom: 0; &:before { content: none !important; display: none !important; } } h4 { position: absolute; width: 100%; left: 0; top: 50%; text-align: center; z-index: 5; font-style: italic; letter-spacing: 0; font-weight: normal; padding: 5px 20px; margin-top: -25px; > span { display: inline-block; position: relative; } span span { display: inline-block; background: #fff; color: #313131; padding: 0 15px; position: relative; min-width: 120px; height: 40px; line-height: 40px; white-space: nowrap; -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; font-style: normal; font-size: 14px; font-weight: normal; &:before { top: -5px; left: -5px; right: -5px; bottom: -5px; content: ""; display: block; background: none; position: absolute; border: 1px solid #fff; } } } &:hover h4 span { color: $color__blue; } &.boxes-style-2 h4 { background: #fff; padding: 0 20px; margin-top: -20px; &:before { top: -5px; left: 0; right: 0; width: 100%; bottom: -5px; content: ""; display: block; background: none; position: absolute; border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; } span { background: none; &:before { content: none; display: none; } } } &.boxes-style-3, &.boxes-style-4 { h4 span span:before, .fea-box-img:before { content: none; } } } .penci-featured-ct .penci-fea-in.boxes-style-3, .penci-featured-ct .penci-fea-in.boxes-style-4 { &:before, &:after { opacity: 0.4; -webkit-transition: all 0.4s; transition: all 0.4s; z-index: 5; transform: none; -webkit-transform: none; left: 10px; right: 10px; top: 10px; bottom: 10px; } &:hover { &:before, &:after { opacity: 1; } } } .penci-fea-in.boxes-style-3 { .fea-box-img { transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; } &:hover .fea-box-img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); } h4 span span { text-transform: uppercase; font-size: 12px; letter-spacing: 1px; font-weight: bold; } } .penci-fea-in.boxes-style-4 { .fea-box-img { transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; } &:hover .fea-box-img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); } h4{ margin-top: 0; transform: translateY(-50%); } h4 span span { background-color: transparent; color: $color__white; font-weight: 500; margin: 0; padding: 0; font-size: 22px; line-height: 1.25; height: auto; } } &.penci-ibox-disspace { .penci-row { margin-left: 0; margin-right: 0; } .penci-featured-ct { padding-left: 0; padding-right: 0; margin-bottom: 0; } } } @media ( max-width: 991px ) and ( min-width: 600px ) { .penci-image-box .penci-featured-ct { &.penci-col-3, &.penci-col-4, &.penci-col-5, &.penci-col-6 { width: 50%; float: left; } } } @media ( max-width: 480px ) { .penci-image-box .penci-featured-ct { width: 100%; } }x

Windows NT KPTV 6.2 build 9200 (Windows Server 2012 Datacenter Edition) i586