Elementor custom CSS transparency issue
-
Hello everyone,
I am having an issue using TranslatePress and the custom CSS function of Elementor.
Before I go into the issue, let me state that I have searched the forum and documentation for relevant information.
I also tried basic troubleshooting and deactivated all plugins and switch to default theme twenty twenty-one, but the problem persisted.So I am using Custom CSS on Elementor columns and elements to change the transparency of elements on mouse hover.
To be more precise, what I want to achieve is for the “text1” class elements to have 0 opacity and for the “text2” class element to gain 1 opacity on mouse hover over the column.
This is implemented on the section named “Mes Domaines De Compétence :” at the following URL: https://newpotential.ch/fr/ at about 70% down the page.
This transparency implementation works well on the untranslated version of the website, as well as on most columns of the translated website, but not on the first column of the section named “Troubles de la Concentration” (as is obviously seen on the page).
Following are the codes that I used in the Custom CSS advanced options of Elementor, where the texts to disappear on hover have CSS class of “text1”, and the texts to appear on hover have class CSS of “text2”.
-
Custom CSS for text element of class “text2”:
selector {
opacity: 0;
}-
Custom CSS for the columns:
selector:hover .text1 {
transition: .2s ease all!important;
opacity: 0;
}selector:hover .text2 {
transition: .2s ease all!important;
opacity: 1;
}}
Note that I use to have this problem on the untranslated version of the website after installing TranslatePress, and on the same column. After I unistalled the plugin and reinstalled it during troubleshooting process, the issue went from the untranslated version of the website to the translated version.
I am using the free version of TranslatePress Version 2.2.7, WordPress Version Version 5.9.3, Elementor Version 3.6.5, Elementor Pro Version 3.7.1, and theme Hello Elementor Version: 2.5.0.
Please let me know if you need any more information.
Thank you, any help would be so appreciated.
Etienne.
The page I need help with: [log in to see the link]
- The topic ‘Elementor custom CSS transparency issue’ is closed to new replies.