[Support request] How to show Post title on hover, Styling effect

Currently this would require some custom coding, but it is an option we want to provide at some point.

What do you mean by portfolio type layout? Any examples?

Hi Tom
Loving the plugin and GP, is this option far off?
I’m really keen to add this to a site, so currently looking at adding this in myself if not?

Hi there!

I just want to say that this functionality will really be very useful for portfolio websites.
Hope it will be added soon.

This CSS should achieve something like this:

.wp-show-posts-inner {
	position: relative;
	margin-bottom: 0 !important;
	overflow: hidden;
}

.wp-show-posts-image {
	position: relative;
}

.wp-show-posts-image a {
	display: block;
}

.wp-show-posts-image a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	top: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition: opacity 500ms ease-in-out;
}

.wp-show-posts-image a:hover:before {
	opacity: 1;
}

.wp-show-posts-entry-header {
	position: absolute;
	left: 0;
	bottom: -100px;
	z-index: -1;
	opacity: 0;
	pointer-events: none;
	transition: bottom 500ms ease-in-out, opacity 1s ease-in-out;
}

.wp-show-posts-image:hover + .wp-show-posts-entry-header {
	bottom: 0;
	opacity: 1;
	z-index: 1;
	padding: 20px;
	display: inline;
}

.wp-show-posts-columns .wp-show-posts-entry-title {
	font-size: 18px;
}

.wp-show-posts-entry-title a {
	color: #fff;
}

.wp-show-posts-meta a,
.wp-show-posts-meta a:visited {
    color: rgba(255,255,255,0.7);
}

.wp-show-posts-image {
	margin-bottom: 0;
}

There should be an option to add an icon in the WPSP settings – if you turn that on and link me to your site, we should be able to substitute it with a FA icon 🙂

Try this CSS:

.wp-show-posts-image-overlay.eye:before {
    font-family: FontAwesome;
    content: "\f06e";
}

You’ll need to update the unicode to your desired icon, and possibly the font family name if you’re using Font Awesome 5.

Let me know 🙂