Docs

[anilovesweb]

Hello!

I have checked your kind inputs in this: https://community.theme.co/forums/topic/overlaying-text-on-an-image-in-cornerstone/.

I did everything as written, updating Custom CSS and Custom JS.

I have a column with 5 images in it. The hover is not working. Could you please advise if there is any update on this since?

Thanks for looking into this! 🙂

[Rue Nel]

Hi There,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[anilovesweb]

This reply has been marked as private.

[Friech]

Hi There,

Thank you for the credentials, but what hover effect you’re wanting to do? You can do hover effect with just CSS

e.g.

.column-with-hover .hover-text:hover {
	background-color: rgba(255,255,255,.5);
}

Please clarify.

Cheers!

[anilovesweb]

Thanks for the answer.

I have this custom CSS:
.x-img,
.x-img img{
margin-bottom: 0;
width: 100%;
}

.column-with-hover{
position:relative;
overflow: hidden;
}
.column-with-hover .hover-text{
position:absolute;
margin: 0;
background-color: rgba(0,0,0,.5);
width:100%;

And then I have this custom JS:

jQuery(document).ready(function($) {

$(‘.column-with-hover’).hover(function(){

$(this).children(‘.hover-text’).css(“width”,”100%”);

}, function(){
$(this).children(‘.hover-text’).css(“width”,”100%”);
});

});

Both of that I found in your earlier threads.

The problem is that the interaction is not working. Frontend looks like this. No interaction, but text appears on top of the image.

Thanks for looking into it.

[Jade]

Hi there,

The hover effect does not show up on your site because the code you have added are both set to 100% value, thus, not making any difference.

Would you mind describing how you want the hover effect to animate so that we can suggest the custom code?

[anilovesweb]

Oh, sure, thank you.
I am searching something like the 13th effect here: https://miketricking.github.io/dist/
A full layer with 40% black or magenta opacity with a vertically middle aligned text on it.
Thank you for looking into it. Have a great evening!

[Jade]

Hi there,

Please try to add this code in the custom CSS:

.column-with-hover .hover-text {
    position: absolute;
    width: 75% !important;
    padding: 20px 0;
    text-align: center;
    z-index: 99999;
    line-height: 1.6em;
    top: 37%;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    left: 12%;
    transition: opacity .35s,transform .35s;
    -webkit-transform: scale(0,1);
    -ms-transform: scale(0,1);
    transform: scale(0,1);
}

.column-with-hover:hover:after {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
    top: 0;
}

.column-with-hover:hover .hover-text {
     opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

Hope this helps.

[anilovesweb]

Hello,
This is fantastic, better than expected, thank you!
The only thing is that the five picture is five different one, not one.
How shall I set the CSS to make it work for the five different picture/column?
That is my last question for it.
Thank you very much indeed’

[Rue Nel]

Hello There,

Thanks for the updates! Please make sure that all of the columns will have the custom column-with-hover class. I went ahead and modified the page. I also made changes to the css. I am using this:

.column-with-hover {
  position: relative;
  overflow: hidden;
}

.column-with-hover .hover-text {
    position: absolute;
    width: 75% !important;
    padding: 20px 0;
    text-align: center;
    z-index: 99999;
    line-height: 1.6em;
    top: 37%;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    left: 12%;
    transition: opacity .35s,transform .35s;
    -webkit-transform: scale(0,1);
    -ms-transform: scale(0,1);
    transform: scale(0,1);
}

.column-with-hover:hover:after {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
    top: 0;
}

.column-with-hover:hover .hover-text {
     opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

And also I change the color of the custom headline. Please check your homepage now.

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[anilovesweb]

This is perfect!
Thank you for the flawless support!
Have a great weekend!

[Joao]

You too 🙂

[Author]

Posts