Docs

[cmelnik]

Hi,
I am trying to replicate the mouseover effect you have on your Theme X page. Towards the bottom of the page in the Extended Demo area, you have the images with the blue overlay; Agency, Spa, etc. Is that done in Essential Grid or in Cornerstone?

I put an image in the Column and added this css:
/* image hover grow */
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

It grows the image but I can not seem to contain it to the Column or hide area outside of the Column. Can you tell me how to achieve this effect?

Also, if I am on the right track with the image and hover effect, is that blue then just a color with transparency in the column or is the image have a blue mask? And then add a call to action element?

I do not have a live preview of any of these things currently.

Thank you

[Jade]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. 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.

[cmelnik]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the information. I have checked your page and it turns out that you have added a wrong code. Please remove this code:

.grow:hover{
  transform:scale(1.2);
}

And please use this code instead:

.grow:hover {
    background-size: 120% 120% !important;
    background-position: center center !important;
}

I also noticed that you have a shrink code, you might need this code instead:

.shrink{
  transition:all .2s ease-in-out;
  background-size: 120% 120% !important;
  background-position: center center !important;
}

.shrink:hover{
  background-size: 100% 100% !important;
}

By the way, I want to clarify that this codes are actually an alternative so that you can achieve almost the same effect in Themeco X demo section. We have made a custom code for that section thus you section has a different structure.

We would loved to know if this has work for you. Thank you.

[cmelnik]

Great stuff but not exactly right yet. I applied the “grow” to the left 1/2 column and the shrink to the right 1/2 column.

The left 1/2 column “grow” class is bleeding over onto the right column image. And the “shrink” class only activates on the CTA in the right column.

Can I define for each class to work specifically on the its own 1/2 column when hovering over the image?

Thank you for all your help!

[Lely]

Hi There,

Please update this custom CSS:

.shrink {
    transition: all .2s ease-in-out;
    background-size: 120% 120% !important;
    background-position: center center !important;
}

To this:

.shrink {
    transition: all .2s ease-in-out;
    background-size: 120% 120% !important;
    background-position: center center !important;
    z-index: 999999;
    position: relative;
}

See this:http://screencast-o-matic.com/watch/cDlDo2QZOn

Hope this helps.

[cmelnik]

You guys are great!

All the support and time is greatly appreciated.

Please keep it up as I am am buying more licenses soon and will undoubtedly need more help.

Regards

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts