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

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

Tagged: ,

This topic contains 25 replies, has 6 voices, and was last updated by  Tom 11 months ago.

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #2949

    Shishupal
    Participant

    Hello,
    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.

    #2971

    Tom
    Keymaster

    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?

    #3072

    Shishupal
    Participant
    #3074

    Shishupal
    Participant
    #3085

    Tom
    Keymaster

    Awesome – thank you for the examples! 🙂

    #3182

    Claire
    Participant

    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?

    #3189

    Tom
    Keymaster

    We’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 🙂

    #3370

    Daniel
    Participant

    Hi there!

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

    #3695

    Shishupal
    Participant

    Hi,

    I am looking for an update if you have added one or two styling i have mentioned 🙂

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

    Shishupal
    Participant

    Thank 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.

    #3811

    Tom
    Keymaster

    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 🙂

    #3815

    Shishupal
    Participant

    Hi, Activated.
    Here is the link
    http://appsgames.in/portfolio/

    #3819

    Tom
    Keymaster

    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 🙂

    #4995

    Carlotta
    Participant

    Hi 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

Viewing 15 posts - 1 through 15 (of 26 total)

You must be logged in to reply to this topic.