Portfolio Image Title Overlay

Mauer Themes Support Stills Portfolio Image Title Overlay

Tagged: 

This topic contains 10 replies, has 2 voices, and was last updated by  Paul 1 month, 2 weeks ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #3031

    debje
    Participant

    Hi Paul,

    You told me you could help out with some css/coding tweaks to create the title overlay on portfolio images. Like you did with the Bild theme. I would really appreciate it if you could help me to recreate this functionality within the Stills theme.

    Thanks in advance!
    Deborah

    #3032

    debje
    Participant

    Paul, another question.. Is there a workaround to disable the portfolio lightbox functionality? I don’t want those images to be clickable. I’m quite handy with code actually, which file do I need to edit to disable that?
    Thanks again!

    #3033

    Paul
    Keymaster

    Hello Deborah,

    Let me get back to you with that tomorrow.

    Regards,
    Paul

    #3038

    debje
    Participant

    That’d be nice. Thanks!

    #3044

    Paul
    Keymaster

    Hello Deborah,

    Here is a CSS customization that will make the portfolio titles overlay the thumbnails.

    You can add this code by going to ‘Appearance’ -> ‘Customize’ -> ‘Additional CSS’ in your Admin Panel. There you can just paste the following code and hit ‘Publish’.

    .entry-thumb-overlay {
    	background-color: #070809;
    }
    
    .entry-thumb-link:hover .entry-thumb-overlay {
    	opacity: 0.72;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=72)";
    	-moz-opacity: 0.72;
    	-khtml-opacity: 0.72;
    }
    
    .portfolio-project-tile .entry-title {
    	position: absolute;
    	top:45%;
    	width: 100%;
    	padding: 0 18px;
    	text-align: center;
    	color: #fff;
    	z-index: 102;
    	opacity: 0;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    	-moz-opacity: 0;
    	-khtml-opacity: 0;
    
    	-webkit-transition: opacity .4s ease;
    	-o-transition: opacity .4s ease;
    	transition: opacity .4s ease;
    }
    
    .mauer-more-projects-wrapper .portfolio-project-tile .entry-title {
    	margin-top:0;
    }
    
    .portfolio-project-tile .entry-thumb-link:hover .entry-title {
    	opacity: 1;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    	-moz-opacity: 1;
    	-khtml-opacity: 1;
    }
    
    .entry-thumb-link {
    	position: relative;
    }

    Kind regards,
    Paul

    #3047

    Paul
    Keymaster

    Deborah,

    As for disabling portfolio lightbox functionality, you can do that the following way:

    1. Add this code to the end of the functions.php file, just before the closing ?>.
    Should look like this: screenshot.

    function mauer_stills_custom_dequeue_scripts() {
    	wp_dequeue_script('photoswipe');
    	wp_dequeue_script('photoswipe-ui-default');
    	wp_dequeue_script('mauer-stills-photoswipe-gallery-builder');
    }
    add_action('wp_print_scripts', 'mauer_stills_custom_dequeue_scripts', 100);
    
    function mauer_stills_custom_dequeue_styles() {
    	wp_dequeue_style('photoswipe');
    	wp_dequeue_style('photoswipe-default-skin');
    }
    add_action('wp_print_scripts', 'mauer_stills_custom_dequeue_styles', 100);

     

    2. In the functions.php file comment out lines 430 and 432 (insert two slashes at the beginning of the lines). Should look like this: screenshot.

    Kind regards,
    Paul

    ——
    A little disclaimer: it’s best to do such customizations in a child theme or a custom plugin, so they do not get overwritten during theme updates. However, of course, you can always re-introduce them after an update.

    • This reply was modified 1 month, 3 weeks ago by  Paul.
    • This reply was modified 1 month, 3 weeks ago by  Paul.
    #3051

    debje
    Participant

    Hi Paul,

    Unfortunately, the CSS for the title overlay doesn’t work here. The title won’t show up on hover. When I set .portfolio-project-tile .entry-title to opacity:1 just for testing, the title does show ( please check: https://snag.gy/A3v4ck.jpg ) but it’s not aligned within the portfolio image as well. Any ideas how to fix this?

    Thanks,
    Deborah

    #3053

    Paul
    Keymaster

    Hi Deborah,

    I tested the CSS code before posting, and once again just now. It should be working unless you made any other code modifications.

    See screenshot:

    So please try inserting the code once again. And if there’s still no luck, please email me your WP Admin credentials to pavel [at] mauer.co, and I’ll insert it for you.

    Kind regards,
    Paul

    #3057

    debje
    Participant

    Hi Paul,

    I finally know why the code didn’t work over here. When using the 3 columns (Airy grid), the title overlay indeed works perfectly. But it doesn’t with the 2 columns (Flow) setting. So that explains the issue 🙂 Any ideas with CSS how to make it work for the 2 columns setting?

    Thanks!
    Deborah

    #3060

    debje
    Participant

    Hi Paul,
    I still haven’t figured out the css fix for the 2 columns yet. I hope you can help me with this.
    Thanks!

    #3064

    Paul
    Keymaster

    Hi Deborah,

    The following code will do the trick in all portfolio layouts. Please use it instead of the code posted above:

    .entry-thumb-overlay {
    	background-color: #070809;
    }
    
    .portfolio-project-tile a:hover .entry-thumb-overlay {
    	opacity: 0.64;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=64)";
    	-moz-opacity: 0.64;
    	-khtml-opacity: 0.64;
    }
    
    .portfolio-project-tile .entry-title {
    	position: absolute;
    	top:45%;
    	width: 100%;
    	padding: 0 18px;
    	text-align: center;
    	color: #fff;
    	z-index: 102;
    	opacity: 0;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    	-moz-opacity: 0;
    	-khtml-opacity: 0;
    
    	-webkit-transition: opacity .4s ease;
    	-o-transition: opacity .4s ease;
    	transition: opacity .4s ease;
    }
    
    .mauer-more-projects-wrapper .portfolio-project-tile .entry-title {
    	margin-top:0;
    }
    
    .portfolio-project-tile a:hover .entry-title {
    	opacity: 1;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    	-moz-opacity: 1;
    	-khtml-opacity: 1;
    }
    
    .portfolio-project-tile a {
    	position: relative;
    }

    If you enjoy the theme (or the support), I kindly ask you to rate it on ThemeForest. This literally takes a moment, and makes a huge difference. Thanks.

    Kind regards,
    Paul

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.