ThemeNectar

Comments

RichardHolt started the conversation
May 7, 2017 at 7:45am
How can I control the transparency of the coloured overlay that appears when hovering over a project tile on the portfolio page? I'd like them to be solid.
Cheers!
®
3,033
Andrew replied
May 7, 2017 at 6:18pm
Hi there,

I hope you are having an awesome day and thanks for contacting us regarding your query.

This can be done with the help of some Custom CSS. Kindly provide me with a link to a page with this so that I may be able to write up some CSS that should work for your setup.

Looking forward to your reply :)

Cheers!
RichardHolt replied privately
9,009
Tahir replied
May 8, 2017 at 1:47pm
Hey Again,
Could you provide one of our Demo links so i can check which configuration you are using : http://themenectar.com/demo/salient-promo .
Be.st

ThemeNectar Support Team
RichardHolt replied
May 8, 2017 at 8:13pm
Hello.
There's not a demo of exactly what I've set up, but it looks like it would be Masonry Style 2.
So, like this one: http://themenectar.com/demo/salient-ascend/portfolio-fullwidth-style-2/
But masonry.
So, the colour overlays which fade up on rollover have a transparency value I'd like to change.
®
9,009
Tahir replied
May 9, 2017 at 12:12pm
Hey Again,
I am afraid that cant be changes using CSS as JS transitions are applied
Be.st

ThemeNectar Support Team
9,009
Tahir replied
May 9, 2017 at 12:12pm
However have noted it in the Wishlist so it can be added in Upcoming Theme Updates.

Be.st

ThemeNectar Support Team
RichardHolt replied
May 11, 2017 at 7:19pm
Thanks for the update. I'm happy to make edits to parts of my child theme in the meantime if you can tell me where to look...

3,033

Andrew replied

May 11, 2017 at 8:35pm

Hi Richard,

Thanks for your reply,

You may take a look in the http://themenectar.com/demo/salient-ascend/wp-content/themes/salient/js/init.js file around line 10136-10164. Here is an example of the code below

/portfolio item hover effect
    
    ////desktop event 
    function portfolioHoverEffects() { 
        if(!$('body').hasClass('mobile') && !navigator.userAgent.match(/(iPad|IEMobile)/)) {
            
            //style 1 & 2
            $('.portfolio-items:not([data-ps="7"]) .col .work-item:not(.style-3-alt):not(.style-3):not([data-custom-content="on"])').hover(function(){
                $(this).find('.work-info .vert-center').css({'margin-top' : 0});
                $(this).find('.work-info, .work-info .vert-center *, .work-info > i').css({'opacity' : 1});
                $(this).find('.work-info-bg').css({ 'opacity' : 0.9 });
            },function(){
                $(this).find('.work-info .vert-center').css({ 'margin-top' : -20 });
                $(this).find('.work-info, .work-info .vert-center *, .work-info > i').css({ 'opacity' : 0 });
                $(this).find('.work-info-bg').css({ 'opacity' : 0 });
            });
            
            
            //style 3
            $('.portfolio-items .col .work-item.style-3').hover(function(){
                $(this).find('.work-info-bg').css({ 'opacity' : 0 });
            },function(){
                
                $(this).find('.work-info-bg').css({ 'opacity' : 0.45 });
            });

Please let me know if there are any more questions that I may answer for you.

Cheers!