.feature-current-item-style4 {
position: relative;
}
.feature-current-item-style4 .inner-box {
position: relative;
}
.feature-current-item-style4 .inner-box:hover .image-box .image img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.feature-current-item-style4 .inner-box:hover .image-box .image a:after {
left: 0;
width: 100%;
opacity: 0.5;
}
.feature-current-item-style4 .inner-box:hover .overlay-content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
visibility: visible;
}
.feature-current-item-style4 .image-box {
position: relative;
transition: all 300ms ease;
border-right: 6px solid var(--theme-color1);
padding-bottom: 30px;
}
@media (prefers-reduced-motion: reduce) {
.feature-current-item-style4 .image-box {
transition: none;
}
}
@media (max-width: 575.98px) {
.feature-current-item-style4 .image-box {
padding-bottom: 0;
border-right: 0;
}
}
.feature-current-item-style4 .image-box .image {
position: relative;
margin-bottom: 0;
overflow: hidden;
}
.feature-current-item-style4 .image-box .image img {
width: 100%;
transition: all 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
.feature-current-item-style4 .image-box .image img {
transition: none;
}
}
.feature-current-item-style4 .image-box .image a:after {
background: var(--theme-color2);
bottom: 0;
left: 50%;
top: 0;
content: "";
position: absolute;
width: 0;
opacity: 0;
pointer-events: none;
transition: all 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
.feature-current-item-style4 .image-box .image a:after {
transition: none;
}
}
.feature-current-item-style4 .info-box {
position: absolute;
right: -6px;
left: 20px;
bottom: 0px;
background-color: #fff;
padding: 25px 20px;
padding-left: 100px;
padding-right: 50px;
transition: all 300ms ease;
box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1);
}
@media (prefers-reduced-motion: reduce) {
.feature-current-item-style4 .info-box {
transition: none;
}
}
@media (max-width: 575.98px) {
.feature-current-item-style4 .info-box {
position: relative;
right: 0;
left: 0;
padding-left: 80px;
padding-right: 20px;
}
}
.feature-current-item-style4 .info-box .icon {
position: absolute;
left: 20px;
top: -33px;
height: 66px;
width: 66px;
background-color: var(--theme-color1);
border-radius: 50%;
color: #fff;
font-size: 32px;
transition: all 300ms ease;
display: flex;
align-items: center;
justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
.feature-current-item-style4 .info-box .icon {
transition: none;
}
}
@media (max-width: 575.98px) {
.feature-current-item-style4 .info-box .icon {
top: 12px;
left: 15px;
height: 50px;
width: 50px;
font-size: 20px;
}
}
.feature-current-item-style4 .info-box .feature-title {
line-height: 1.2em;
margin-top: 0;
margin-bottom: 0;
}
.feature-current-item-style4 .info-box .read-more {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
right: 8px;
top: 50%;
height: 40px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 40px;
color: #6c6a72;
font-size: 20px;
opacity: 0.5;
transition: all 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
.feature-current-item-style4 .info-box .read-more {
transition: none;
}
}
@media (max-width: 575.98px) {
.feature-current-item-style4 .info-box .read-more {
display: none;
}
}
.feature-current-item-style4 .info-box .read-more:hover {
background-color: var(--bg-theme-color2);
color: #fff;
}
.feature-current-item-style4 .overlay-content {
position: absolute;
left: 20px;
right: 0;
bottom: 0;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
transform-origin: bottom;
transition: all 300ms ease;
opacity: 0;
visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
.feature-current-item-style4 .overlay-content {
transition: none;
}
}
@media (max-width: 575.98px) {
.feature-current-item-style4 .overlay-content {
left: 0;
}
}
.feature-current-item-style4 .overlay-content .info-box {
position: relative;
left: 0;
bottom: 0 !important;
box-shadow: none;
background-color: var(--theme-color1);
padding-right: 20px;
transition: all 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
.feature-current-item-style4 .overlay-content .info-box {
transition: none;
}
}
.feature-current-item-style4 .overlay-content .info-box .icon {
background-color: #ffffff;
color: var(--theme-color1);
transition: all 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
.feature-current-item-style4 .overlay-content .info-box .icon {
transition: none;
}
}
@media (max-width: 575.98px) {
.feature-current-item-style4 .overlay-content .info-box .icon {
top: 25px;
left: 15px;
height: 50px;
width: 50px;
font-size: 20px;
}
}
.feature-current-item-style4 .overlay-content .info-box .feature-title {
margin-bottom: 10px;
color: #ffffff;
}
.feature-current-item-style4 .overlay-content .info-box .feature-details {
color: rgba(255, 255, 255, 0.8);
}