Disabling Single Project Overlay - Perth Portfolio Masonry

Hi guys,
I would love to use just a single image with a fixed title and no overlay for just some of the projects in Perth Portfolio Masonry.

This is the site, I’m talking about the blue pictures.

Any idea?

Hello there,

In order to achieve such that objective, you can add this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


.projects-area .project-title {
  transform: none;
  background-color: transparent;
}

Regards,
Kharis

Hi Kharis,
thanks for your reply. But this would disable all overlays, I need to disable only some of them ( the blue ones)

And also the overlays are not clickable, only the titles. Is it possible to apply the project links on the entire overlay rather than just on the title?

Thnks,

Maria

No-one has any suggestion?

Please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

  'use strict'

  if( $('.projects-area').length ) {

    $.fn.removeOverlay = function(title) {
      var projTitle = this.children('.project-title').children('a').text();
      if(title == projTitle) {
        this.addClass('remove-overlay');
      }    
    };

    $('.project-item').each(function(){
    
        $(this).removeOverlay('Installazione Automatismi');
        $(this).removeOverlay('Manutenzione per Sistemi di Automazione'); 
             
    });
    
  }

})(jQuery);

  1. Update
  2. Add the below CSS code into Appearance > Customize > Additional CSS in your site dashboard.

.remove-overlay .project-title {
  -webkit-transform: scale(1);
  transform: scale(1);
  background-color: transparent;
}  

.remove-overlay .project-title a {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding-top: 30%;
  padding-bottom: 30%;
  text-indent: -9999px;
}  

  1. You’re done.

This line in the jQuery code above remove the overlay on the portfolio item based on specified title.


$(this).removeOverlay('Installazione Automatismi'); 

If you want to remove other portfolio item, for instance: Portoni industriali. Duplicate that line and adjust the title. So it will look like this:


$(this).removeOverlay('Installazione Automatismi'); 
$(this).removeOverlay('Portoni industriali'); 

Regards,
Kharis