Okay
  Public Ticket #1671745
Interactive Banner Element
Open

Comments

  • Tatjana started the conversation

    Hi! 
    I can't figure out how to populate these interactive banners:https://teapro.co.uk/our-story/

    In your example http://demo.qodeinteractive.com/bridge/interactive-banners/  there is a text that appears when you hover over the image. How do I do that? 

    In the backend there is only one field to put in the text and that text appears on the image when it's not in the hover mode. 

    Would really appreciate your help on this!
    Thank you!
    Tatjana 

    Attached files:  Screen Shot 2018-08-09 at 14.36.05.png

  •  1,079
    Qode replied

    Hello Tatjana,

    This is actually image with text over element you can add with WPBakery page builder:

    https://www.screencast.com/t/YhKmmuq7QP

    Best regards,

    Daniel

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • Tatjana replied

    That makes a lot of sense! Thanks a lot for the quick reply!

    Best, Tatjana x

  •  1,079
    Qode replied

    You're welcome. 

    If you have some spare time and if you are satisfied with our support, we would really appreciate it if you would be willing to rate us with 5 stars on this link - http://themeforest.net/downloads By doing this you will be helping us build even better themes and provide better support. 

    Thank you in advance

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • Tatjana replied

    Hi Daniel, 

    I will definiltely make sure to leave a review. However, I have another small issue which you can hopefully help me with. 

    I've implemented the "image with the text over" element on this page: https://teapro.co.uk/hello/and it works fine on desktop, however on mobile the hover function doesn't seem to work. 
    Whereas on yours: http://demo.qodeinteractive.com/bridge/interactive-banners/ it seems to be working just fine. 

    Can you help me to fix it?

    Best, Tatjana

  •  1,079
    Qode replied

    Hi Tatjana,

    Please apply this snippet to Qode Options>General>Custom Css:

    .touch .portfolio_slides .item.mHover .hover_feature_holder{
    display:block!important;
    }
    .portfolio_slides li.item.mHover .hover_feature_holder_inner{
    opacity:1;
    }
    .touch .portfolio_slides li.item.mHover .image_pixel_hover{
    background-color:rgba(21,21,21,0.78);
    display:block!important;
    }

    @media only screen and (max-width: 1000px) and (min-width: 600px) {
    .q_image_with_text_over .text:hover .desc {
    display: block;
    }
    }

    And  this one to Qode Options>General>Custom Js:

    $j('.q_image_with_text_over .text, .portfolio_slides .item').bind('touchstart touchend',function(){$j(this).toggleClass('mHover');});

    Hope this helps,

    Daniel

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Also check our articles with useful tips and suggestions

    Best Regards,

    Qode