Https://feedapparel.com

[kpatrick93]

Hi guys

Can someone tell me how I can have Shop Mens and Womens appear on top of the image when hovering over the image. My site is https://feedapparel.com and i would like to achieve something like https://www.nicceclothing.com/

Thank you

Kevin Patrick

[ruenel]

Hello Kevin Patrick,

Thanks for writing in!

What you have in mind is possible with the help of the background image, a headline and a button. Please do the following:

• Create a section, row and the number of your desired columns.
• In the section settings, find the “Customize” tab and insert a custom my-section class
• In each column, please insert the background images which corresponds to the Men’s and Women’s Clothing.
• Again in each column, add a headline and a button with your link in it.
• And lastly, please insert the following custom css in the settings tab, Settings > Custom CSS

.my-section .x-column > * {
  opacity: 0;
  transition: opacity 1s ease;
}
.my-section .x-column:hover > *{
    opacity: 1;
}

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

[kpatrick93]

Thank you.

I’m having a problem adding elements as every time I go to add a button by clicking the ‘elements’ button it loads a new page and I get the following message:

URL - https://feedapparel.com/content/113/elements
The page you are looking for is no longer here, or never existed in the first place (bummer). You can try searching for what you are looking for using the form below. If that still doesn’t provide the results you are looking for, you can always start over from the home page.

Can you help please?

Thanks

[basanta]

Hello Kevin Patrick,

Thanks for updating the thread!

Look like you are facing permalink issue on your site.
Can you please check this first.

1. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.
2. Reset your htaccess file by renaming it to .htaccess-bak. Then in WP Admin Menu, go to Settings > Permalinks and just click the Save Changes button.
3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.
4. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know if that helps!

In case the issue persists, would you mind providing us with login credentials so we can take a closer look? Please provide following information:
Set it as Secure Note

• Link to your site
• WordPress Admin username / password
• FTP credentials
  All the best!

[kpatrick93]

I think it’s working now! Let me try and come back to you.

Thanks

[ruenel]

Hello Kevin,

It appears that you haven’t followed my suggested steps. Anyways, I made an example test page for your to check out. Please see the secure note.

The steps I did in accomplishing your idea were these:

• Create a section, row and the number of your desired columns.

• In the section settings, find the “Customize” tab and insert a custom my-section class
  

• In the row settings, I have enabled marginless column option and added a black background color.
  

• In each column, I have inserted the background images which corresponds to the Men’s and Women’s Clothing.
  

• Again in each column, I added a headline and a button with your link in it.

• I ended up adding a padding around the columns to make sure that the headline and the button will be at the center of the column.
  

• And lastly, please insert the following custom css in the settings tab, Settings > Custom CSS

.my-section .x-column {
  min-height: 350px;
}

.my-section .x-column > * {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.my-section .x-column > .x-bg{
    opacity: 1;
}

.my-section .x-column:hover > .x-bg{
    opacity: 0.55;
}

.my-section .x-column:hover > *{
    opacity: 1;
}

Hope this helps you.