// taxonomy................................... .sps-taxonomy-title-wrapper { width: 100%; } .sps-taxonomy-title-wrapper i { font-size: 15px; } .sp-smart-post-card .sp-smart-post-card-image img { /* max-width: 100%; */ width: 100%; transition: transform 0.31s ease-in-out; height: auto; } /* Feature Image Zoom in */ .sp-smart-post-card .sp-smart-post-card-image.img-zoom-in img { transition: all 0.3s ease-in-out; } .sp-smart-post-card .sp-smart-post-card-image:hover.img-zoom-in img, .sp-smart-post-background-layout .sp-smart-post-card:hover .sp-smart-post-card-image.img-zoom-in img { transform: scale(1.1); } /* Feature Image Zoom out */ .sp-smart-post-card .sp-smart-post-card-image.img-zoom-out img, .sp-smart-post-background-layout .sp-smart-post-card:hover .sp-smart-post-card-image.img-zoom-out img { transform: scale(1.1); transition: all 0.3s ease-in-out; } .sp-smart-post-card .sp-smart-post-card-image:hover.img-zoom-out img, .sp-smart-post-background-layout .sp-smart-post-card:hover .sp-smart-post-card-image.img-zoom-out img { transform: scale(1); } /* Feature Image slide left */ .sp-smart-post-card .sp-smart-post-card-image.img-slide-left img, .sp-smart-post-background-layout .sp-smart-post-card .sp-smart-post-card-image.img-slide-left img { transform: scale(1.1) translateX(3%); transition: all 0.3s ease-in-out; } .sp-smart-post-card .sp-smart-post-card-image:hover.img-slide-left img, .sp-smart-post-background-layout .sp-smart-post-card:hover .sp-smart-post-card-image.img-slide-left img { transform: scale(1.1) translateX(-3%); } /* Feature Image slide right */ .sp-smart-post-card .sp-smart-post-card-image.img-slide-right img, .sp-smart-post-background-layout .sp-smart-post-card .sp-smart-post-card-image.img-slide-right img { transform: scale(1.1) translateX(-3%); transition: all 0.3s ease-in-out; } .sp-smart-post-card .sp-smart-post-card-image:hover.img-slide-right img, .sp-smart-post-background-layout .sp-smart-post-card:hover .sp-smart-post-card-image.img-slide-right img { transform: scale(1.1) translateX(3%); } /* Image style rotate left */ .sp-smart-post-card .sp-smart-post-card-image.img-opacity img, .sp-smart-post-background-layout .sp-smart-post-card .sp-smart-post-card-image.img-opacity img, .sp-smart-post-card .sp-smart-post-card-image.img-rotate-left img, .sp-smart-post-card .sp-smart-post-card-image.img-rotate-right img, .sp-smart-post-background-layout .sp-smart-post-card .sp-smart-post-card-image.img-rotate-left img, .sp-smart-post-background-layout .sp-smart-post-card .sp-smart-post-card-image.img-rotate-right img { transform: scale(1); transition: all 0.3s ease-in-out; } .sp-smart-post-card .sp-smart-post-card-image:hover.img-rotate-left img, .sp-smart-post-background-layout .sp-smart-post-card:hover .sp-smart-post-card-image.img-rotate-left img { transform: scale(1.2) rotate(5deg); } .sp-smart-post-card .sp-smart-post-card-image:hover.img-rotate-right img, .sp-smart-post-background-layout .sp-smart-post-card:hover .sp-smart-post-card-image.img-rotate-right img { transform: scale(1.2) rotate(-5deg); } .sp-smart-post-taxonomy-name-layout-three { position: relative; overflow: hidden; transition: background-image 0.3s ease-in-out; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background-image: var(--bg-url); } .sp-smart-post-taxonomy-name-layout-three::after { content: ""; position: absolute; inset: 0; background-image: var(--bg-url); background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; z-index: 0; // transform: scale(1); transform: var(--initialValue); opacity: 1; } /* Hover: show new image and zoom */ .sp-smart-post-taxonomy-name-layout-three:hover::after { background: var(--hover-bg-url); background-size: cover; background-position: center; background-repeat: no-repeat; transform: var(--transformValue); opacity: 1; } .sp-taxonomy-overlay-three::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--overlay-color); } .sp-taxonomy-hover-overlay-three::before { transition-property: background; transition-duration: 1s; } .sp-taxonomy-hover-overlay-three:hover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--overlay-hover-color); } .taxonomy-image-overlay-three { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .sps-taxonomy-terms-link { text-decoration: none; color: inherit; display: contents; } .sp-smart-post-taxonomy-info-overlay { position: relative; overflow: hidden; transition: background 0.3s ease-in-out; background-size: cover; background-position: center; background-repeat: no-repeat; } .sp-smart-post-taxonomy-info-overlay::after { content: ""; position: absolute; inset: 0; background: var(--bg-url); background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; z-index: 0; transform: var(--initialValue); } /* Hover: show new image and zoom */ .sp-smart-post-taxonomy-info-overlay:hover::after { background-image: var(--hover-bg-url); transform: var(--transformValue); } .sp-taxonomy-overlay::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--overlay-color, transparent); background-size: cover; background-position: center; transition: all 0.3s ease-in-out; } .sp-taxonomy-overlay:hover::before { background: var(--overlay-hover-color, transparent); } .sp-taxonomy-hover-overlay::before { transition-property: background; transition-duration: 1s; } .sp-taxonomy-hover-overlay:hover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--overlay-hover-color); } .taxonomy-image-overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .sp-taxonomy-overlay:not(.sp-taxonomy-hover-overlay) { &::after { opacity: 1; transition: opacity 0.3s ease-in-out; } &:hover::after { opacity: 0; } } .sp-taxonomy-hover-overlay:not(.sp-taxonomy-overlay) { &::after { opacity: 0; transition: opacity 0.3s ease-in-out; } &:hover::after { opacity: 1; } } .sps-taxonomy-title-name { font-size: 18px; line-height: 1.25; font-weight: 600; text-transform: capitalize; text-decoration: none; } .taxonomy-excerpt { font-size: 14px; line-height: 1.2; font-weight: 400; font-style: normal; } .sp-smart-post-taxonomy-count span { font-size: 18px; font-weight: 600; line-height: 1.2; }