Support Forum

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support CARD STYLE Reply To: CARD STYLE

#19654
elvin
Moderator

Before we start: Make a backup of your current CSS codes. (incase you didn’t paste it all on the code above).

You can start with this:

Replace all the css codes between /* WPSP Card Styling */ /* Add wpsp-card class to WPSP List shortcode wrapper */ and /* Post Navigation */ with this code:

/* WPSP Card Styling */
/* Add wpsp-card class to WPSP List shortcode wrapper */
#wpsp-961 > .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
}

#wpsp-961 > :not(.widget).wpsp-card .wp-show-posts article, .wpsp-card .wp-show-posts-image {
margin-bottom: 0 !important;
}

#wpsp-961 >  .wpsp-card .wp-show-posts-inner {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#wpsp-961 > .wpsp-card .wpsp-content-wrap {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 5% 8%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.35);
background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}

#wpsp-961 > .wpsp-card article {
position: relative;
overflow: hidden;
}

#wpsp-961 > .wpsp-card article, .wpsp-card article .wp-show-posts-image img {
-webkit-backface-visibility: hidden;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}

#wpsp-961 > .wpsp-card article:hover .wp-show-posts-image img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}

This should isolate these styles to your hero WPSP list. The other lists should be back to their defaults unless we missed a few selectors.