- This topic has 6 replies, 3 voices, and was last updated 1 year, 6 months ago by Sakin.
Viewing 7 posts - 1 through 7 (of 7 total)
-
AuthorPosts
-
March 25, 2023 at 9:56 am #316897ujeskoParticipant
I want to hide my post titles and show only on hover. How to do? Any ideas? 🙂 http://staging.jesiorkowski.de/
March 25, 2023 at 10:43 am #316901March 25, 2023 at 11:00 am #316904SakinKeymaster@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; } }
March 25, 2023 at 12:05 pm #316905ujeskoParticipantGreat, many thanks, Sakin! 🙂  And one more request. How can I hide title and wrapper on mobile?
March 26, 2023 at 1:01 am #316917SakinKeymaster@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; }
March 26, 2023 at 12:29 pm #316921ujeskoParticipantMany 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
March 28, 2023 at 1:41 am #316986SakinKeymaster@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; }
-
AuthorPosts
Viewing 7 posts - 1 through 7 (of 7 total)
- The topic ‘Show post title on hover’ is closed to new replies.