Realisierung und Programmierung

Hey stefan,
Please see our documentation for Masonry overlay animation 2 please scroll down a little on the page:

Here is an example:

.avia_desktop.avia_transform3d .av-caption-on-hover.av-caption-style- .av-masonry-entry.av-masonry-item-with-image:hover .av-inner-masonry-content {
    transition: bottom .2s ease-in !important; 
bottom: 0px !important; 
position: absolute !important; 
    min-height: 102px;
    transform-style: none !important; 
-webkit-transform-style: none !important; 
}
.main_color .avia-arrow {
    background-color: transparent !important; 
}
.main_color .site-background {
background-color: rgb(0, 0, 0) !important; 
}
h3.av-masonry-entry-title.entry-title {
color: #fff !important;
}
#top .av-inner-masonry-content {
    -webkit-transform: rotateX(0deg) !important; 
    transform: rotateX(0deg) !important; 
}

Best regards,
Mike

Hi,
Sorry, I was thinking about the hover effect, I see that you want the title to always show, please open your element and under “Element Title and Excerpt display settings” choose “Always display”

Although there is not a “read more” there is a excerpt you can choose from the options, and then use this css:

.av-masonry-entry .avia-arrow { display: none; }
.main_color .container .av-inner-masonry-content {
background-color: transparent !important;
}
.av-inner-masonry-content h3 {
color: #fff !important;
}

Best regards,
Mike

Hi,
I’m sorry I missed that part, I was looking at how the text slid up on hover, not how another element “unfolded” below on click.
So examining the code of the page reveals that this was created with ACF custom post type and uses custom javascript to change the visibility of the unfolded sections.
Unfortunately, I was not able to find a code snippet or tutorial on creating this page or element, but it is quite nice.
My recommendation is to examine the page and try to reverse engineer it as html and add it to a code block, but I can’t assist in creating the ACF custom post type or rewriting our masonry element to perform this.
Sorry I was not more help.

Best regards,
Mike

Hi,
Sorry, but this customization of the element is more than what we can provide within our scope here. It is not some css changes, it is quite a change and customization in the element.
But if you really want this I’m sure you can hire a freelancer that can do it for you. We can recommend Codeable for their experience and expertise with Enfold. Please follow the link to discuss your project and time frame with them.

Best regards,
Mike

Hi,
To remove the on hover arrow, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top .image-overlay.overlay-type-extern .image-overlay-inside:before {
content: '' !important; 
background-color: transparent !important; 
}
.avia_transform #top #main a:hover .image-overlay {
    opacity: 0 !important;
}

Best regards,
Mike

Hi,
Thanks for the login, but it didn’t work for me. Please check.
Also, I’m sorry, but I think I’m getting confused on your requirement for this, we are talking about the “Anwälte” section in the link below, but what do you want?

Best regards,
Mike

Hi,
Thanks for the login, to change the font and color of the team info on hover please try this css:

#awsm-team-2103 .awsm-personal-info span {
color: red !important;
font-family: 'roboto' !important; 
}
#awsm-team-2103 .awsm-personal-info h3 {
color: blue !important;
font-family: 'roboto' !important; 
}

please adjust the colors and font to suit.
Please see the screenshot in Private Content area.

Best regards,
Mike

Hi,
I took a look at your page and see the ID # for the team on that page changed. I have corrected with this code:

#awsm-team-2179 .awsm-personal-info span {
color: red !important;
font-family: 'roboto' !important; 
}
#awsm-team-2179 .awsm-personal-info h3 {
color: blue !important;
font-family: 'roboto' !important; 
}

I didn’t add it because I’m not sure what color or font you want to use.
Please adjust to suit.
To change the background color please try adjusting this css:

.drawer-style.style-2 figcaption {
    background: rgba(35,35,35,.6) !important; 
    color: #fff !important; 
}

Changing the “.6” in the code makes it lighter or darker.

Best regards,
Mike

Hi,
Do you mean the pop up space in “Anwälte”?
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.awsm-details .mCustomScrollBox {
height: 600px !important;
max-height: 600px !important;
}

Best regards,
Mike

Hi,
Thanks for the login, I see that this is a third party plugin, to ensure we are talking about the same section, Please see the screenshot in Private Content area and the area in the red box. I have added this css:

.awsm-details .mCustomScrollBox,.awsm-details .mCustomScrollbar {
min-height: 800px !important;
max-height: 800px !important;
}

and seems to work well, please see the second screenshot in Private Content area.
Please adjust to suit and clear your browser cache when checking.
I assume you checked the documentation for this plugin, this may be a setting, but I don’t know this plugin.

Best regards,
Mike

Hi,
Glad to hear it’s working, the WordPress > Customize > Additional CSS has top preference on css, so sometimes if you have a troublesome element, placing here will correct.
Unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike