figure.effect-ls-boxed {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
width: 100%;
color: #ffffff;
text-align: center;
background-color: #000000;
}
figure.effect-ls-boxed *,
figure.effect-ls-boxed *:before,
figure.effect-ls-boxed *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.55s ease;
transition: all 0.55s ease;
}
figure.effect-ls-boxed img {
max-width: 100%;
backface-visibility: hidden;
vertical-align: top;
opacity: 0.9;
}
figure.effect-ls-boxed .title {
position: absolute;
top: 58%;
left: 25px;
padding: 5px 10px 10px;
}
figure.effect-ls-boxed .title:before,
figure.effect-ls-boxed .title:after {
height: 2px;
width: 800px;
position: absolute;
content: '';
background-color: #ffffff;
}
figure.effect-ls-boxed .title:before {
top: 0;
left: 10px;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
figure.effect-ls-boxed .title:after {
bottom: 0;
right: 10px;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
figure.effect-ls-boxed .title div:before,
figure.effect-ls-boxed .title div:after {
width: 2px;
height: 400px;
position: absolute;
content: '';
background-color: #ffffff;
}
figure.effect-ls-boxed .title div:before {
top: 10px;
right: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
figure.effect-ls-boxed .title div:after {
bottom: 10px;
left: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
figure.effect-ls-boxed h2,
figure.effect-ls-boxed h4 {
margin: 0;
text-transform: uppercase;
}
figure.effect-ls-boxed h2 {
font-weight: 400;
}
figure.effect-ls-boxed h4 {
display: block;
font-weight: 700;
background-color: #ffffff;
padding: 5px 10px;
color: #000000;
}
figure.effect-ls-boxed figcaption {
position: absolute;
bottom: 42%;
left: 25px;
text-align: left;
opacity: 0;
padding: 5px 60px 5px 10px;
font-size: 0.8em;
font-weight: 500;
letter-spacing: 1.5px;
}
figure.effect-ls-boxed figcaption .effect-description {
margin: 0;
}
figure.effect-ls-boxed a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
figure.effect-ls-boxed:hover img,
figure.effect-ls-boxed.hover img {
zoom: 1;
filter: alpha(opacity=35);
-webkit-opacity: 0.35;
opacity: 0.35;
}
figure.effect-ls-boxed:hover .title:before,
figure.effect-ls-boxed.hover .title:before,
figure.effect-ls-boxed:hover .title:after,
figure.effect-ls-boxed.hover .title:after,
figure.effect-ls-boxed:hover .title div:before,
figure.effect-ls-boxed.hover .title div:before,
figure.effect-ls-boxed:hover .title div:after,
figure.effect-ls-boxed.hover .title div:after {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
figure.effect-ls-boxed:hover .title:before,
figure.effect-ls-boxed.hover .title:before,
figure.effect-ls-boxed:hover .title:after,
figure.effect-ls-boxed.hover .title:after {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
figure.effect-ls-boxed:hover figcaption,
figure.effect-ls-boxed.hover figcaption {
opacity: 1;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}