Customized CTA

Support
#1

Hey there,

Hope you’re well
I hope you could help me out with the following issue im experiencing.
I’ve tried all the features in the X theme to replicate the following page: https://www.shortstache.com/professional
I love the look of having all the categories placed beneath each other with a cover image and the pop up text and gradient when I hover my mouse over it.
However everything I tried, using images, Cta, or callouts did not give me the result I wanted.
Hope you can help out! Cheers

#2

Hi @genesis77,

You can build that page by following the steps below.

  1. Create a page and selecet a no container template.

  1. Create a Section for each of your category, then add a black lower background and add your corresponding image to upper background

  1. Add a Headline element to each section, with category name as text and link it to the corresponding category page
    and set color to white

eg. <a href="http://yoursite.com/category/smartcar" style="color:#fff;">SMARTCAR</a>

  1. Add this in Cornerstone > CSS 
. x-section:hover .x-bg-layer-upper-image {
    opacity:0.5;
}

Hope this helps

#3

Hey Paul,

Really appreciate you for getting back to me so quickly,
The CTA got fixed but the headline doesn’t seem to work with me.
here’s the link if you’d like to have a look: http://gaetanosman.com/professional/
I don’t know how to overlay the headline over the CTA so that it only appears when I hover over the CTA
I also can’t seem to get rid of the text covering the CTA when I’m not hovering over it. If I remove the “.”, it prompts a “enter text here” by default.

Looking forward to hear from you Paul
Cheers Mate!

#4

Hi @genesis77,

Please add the my-headline CSS class to your custom headline:

Then add the following CSS:

.my-headline.x-text.x-text-headline {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.x-section:hover .x-text.x-text-headline.my-headline {
    opacity: 1;
}

.x-text-headline.my-headline p {
    margin-bottom: 0;
}

.x-creative-cta>span.text {
    display: none;
}

Hope that helps and thank you for understanding.

#5

Hey Thai,

You’re the man brother, works like a charm. just got one last final issue and that is when I hover over the CTA, the text also appears dimmed by the CTA hover effect.
I would like the Text to appear unaffected by the gradient effect of the CTA when I hover over it.
I hope this can be resolved easily, appreciate the help you guys have been offering!

#6

There’s also one more issue,
It seems after I’ve added the CSS, I can no longer change the headline.
It’s now indented into CTA.

Cheers!

#7

Hey Paul,

To fix that, please update this code:

.my-headline.x-text.x-text-headline {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

to

.my-headline.x-text.x-text-headline {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.5s ease;
}

Then for the text not being editable, update this code:

.x-creative-cta>span.text {
    display: none;
}

to

body:not(.cs-preview) .x-creative-cta>span.text {
    display: none;
}

Hope this helps.

#8

You guys rock!

Cheers mate!

#9

You’re most welcome, Paul. Have a nice weekend.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.