Home › Forums › Pro Support › How to show Post title on hover, Styling effect
Tagged: hover, post title
- This topic has 25 replies, 6 voices, and was last updated 4 years, 2 months ago by
Tom.
-
AuthorPosts
-
November 14, 2017 at 3:12 am #2949
Shishupal
ParticipantHello,
I want to show post title on hover on the center of the image with some styles. Is it possible?? Also if You have any different option for portfolio type layout. Most people looking for portfolio type post show.November 16, 2017 at 6:22 pm #2971Tom
KeymasterCurrently 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?
December 3, 2017 at 9:29 am #3072Shishupal
ParticipantDecember 3, 2017 at 9:46 am #3074Shishupal
Participantone more https://certy.px-lab.com/florist/
December 5, 2017 at 12:41 am #3085Tom
KeymasterAwesome – thank you for the examples! 🙂
January 1, 2018 at 9:21 am #3182Claire
ParticipantHi 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?January 2, 2018 at 11:37 pm #3189Tom
KeymasterWe’re prepping WPSP (free) for a January update. That update will allow us to get going on the pro version again – that’s where this option will come in 🙂
January 19, 2018 at 7:09 am #3370Daniel
ParticipantHi there!
I just want to say that this functionality will really be very useful for portfolio websites.
Hope it will be added soon.February 23, 2018 at 12:43 am #3695Shishupal
ParticipantHi,
I am looking for an update if you have added one or two styling i have mentioned 🙂
March 5, 2018 at 11:43 pm #3777Tom
KeymasterThis 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; }
March 7, 2018 at 9:45 pm #3804Shishupal
ParticipantThank you.
It is working. I wonder if it is possible to add a fontawesome icon on hover on the center of the image.
That will be awesome.
March 7, 2018 at 10:57 pm #3811Tom
KeymasterThere 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 🙂
March 8, 2018 at 3:36 am #3815Shishupal
ParticipantHi, Activated.
Here is the link
http://appsgames.in/portfolio/March 8, 2018 at 10:08 pm #3819Tom
KeymasterTry 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 🙂
June 21, 2018 at 8:29 am #4995Anonymous
InactiveHi Tom,
I have the same situation on one of my client’s websites. He wants to have kind of portfolio view on the home page but the images should be arranged without big spaces between them.
So I added css with minus margins which I found in one of the other threads here
.wp-show-posts-image.wpsp-image-center {
margin-top: -15px;
margin-left: -15px;
margin-right: -15px;
margin-bottom: -15px;
}This worked great but then my client wanted to have the image title within the image on hover. That’s why I am here now. I added the css which worked perfect with one exception. The left and right margin is changing and I don’t find a way to bring it back to what I had before. Do you have an idea where I have to change the css?. Here is the link https://dev.tsbasilisk.ch
thanks for your help
Carlotta -
AuthorPosts
- You must be logged in to reply to this topic.