We're merging with GenerateBlocks! Learn more here.

Support Forum

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support How to show Post title on hover, Styling effect Reply To: How to show Post title on hover, Styling effect

#3777
Tom
Keymaster

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;
}