Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1401221
    designerken
    Participant

    I want to mimic the output of the recent post shortcode hover over an image and have the color overlay, but want to have text instead of an icon.

    I also want this to be borderless and with 2 rows and 2 columns so that I can have a total of 4 images.

    What is the best way to build this in cornerstone? I have attached a mock-up of what I am describing.

    #1401544
    Rupok
    Member

    Hey there,

    Thanks for writing in! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

    Thank you for your understanding.

    #1402184
    designerken
    Participant

    Is that because it cannot be done with cornerstone?

    #1402666
    Friech
    Moderator

    Hi There,

    It can be done in Cornerstone, but that will require a complex custom CSS. Please provide us the page URL where we can see that section, maybe there is something we can do about it.

    Thanks.

    #1405534
    designerken
    Participant

    There is no section, I am just trying to figure out how to replicate that mockup in cornerstone.

    So would I make two rows with 2 columns. Then add a background image to those each of the 4 columns?

    Then what? how do I create the haver state and text to mimic the recent posts css.

    #1405960
    Lely
    Moderator

    Hi There,

    Yes, correct on the first part. Just enable Marginless column option.
    Inside each of those column, add Custom Headline element for the text and choose center text alignment.
    Add col-with-hover on each of those columns class field.
    Also add the following CSS:

    .col-with-hover {
        vertical-align: middle !important;
        height: 500px; /*Feel free to adjust this height*/
        position: relative !important;
    }
    .col-with-hover .h-custom-headline {
        margin: 0 !important;
        display: none;
    }
    .col-with-hover:hover:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,0,,0.5); 
    }
    .col-with-hover:hover .h-custom-headline {
        display: block;
        transition: all 5s ease;
       
    }

    Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

  • <script> jQuery(function($){ $("#no-reply-1401221 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>