[ujesko]

I want to hide my post titles and show only on hover. How to do? Any ideas? 🙂 http://staging.jesiorkowski.de/

[tikaram]

@ujesko : I will check the issue and get back to you soon.

Regards,
Tikaram

[Sakin]

@ujesko: Can you try adding the following CSS in the “Appearance => Customize => Additional CSS” box:

@media screen and (min-width: 48em) {
	.featured-content-wrapper .entry-header {
		visibility: hidden;
	}

	.featured-content-wrapper .hentry:hover .entry-header,
	.featured-content-wrapper .hentry:focus .entry-header {
		visibility: visible;
	}
}

[ujesko]

Great, many thanks, Sakin! 🙂  And one more request. How can I hide title and wrapper on mobile?

[Sakin]

@ujesko: It is not a good user experience to hide the title and wrapper on the mobile. But if you want to do that then remove the old CSS I gave you earlier and add the following CSS instead:

.featured-content-wrapper .entry-header {
    visibility: hidden;
}

.featured-content-wrapper .hentry:hover .entry-header,
.featured-content-wrapper .hentry:focus .entry-header {
    visibility: visible;
}

[ujesko]

Many thanks again for your efforts, Sakin! With your CSS the wrapper are still visible on mobile. Is it possible to get the following result? http://working.jesiorkovski.de/Screenshot

[Sakin]

@ujesko: Ok then add the following CSS:

.featured-content-wrapper .hentry {
	display: block;
}
.featured-content-wrapper .post-thumbnail,
.featured-content-wrapper .entry-header {
	display: block;
	position: relative;
	width: 100%;
}
.featured-content-wrapper .entry-header {
	width: 100%;
	position: absolute;
	top: 30%;
	left: 0;
	right: 0;
	padding: 35px;
	-webkit-transform: translateY(-30%);
	-moz-transform: translateY(-30%);
	-ms-transform: translateY(-30%);
	-o-transform: translateY(-30%);
	transform: translateY(-30%);
	background-color: rgba(0, 0, 0, 0.25);
	text-align: left;
}
.featured-content-wrapper .hentry:nth-child(2n) .post-thumbnail {
	left: auto;
}

[Author]

Posts