Is there a way to vertically align (top to bottom) the overlay text in the image accordion preset?
I have tried different css in the html field, but nothing works.
Note: It aligns to the bottom when the “bottom” animation is selected, but it centers automatically in the middle for “blur”, “background” and “zoom” animations.
Hi @Richard_Honey. Unfortunately there is no setting to change the text alignment, but you can use some CSS to achieve the result you want. You can use the .ed-element.preset-image-accordion-v4-default .image-accordion-trigger a > span selector that is used in the Preset CSS.
For example: To align to the top you could add this snippet to the bottom of your CSS code
.ed-element.preset-image-accordion-v4-default .image-accordion-trigger a > span {
top: 10%;
}
Change the value to 90% instead of 10% and it aligns to the bottom. You can also use pixel values if you want.
Hope this helps!
Thank you, Ronnie!
It worked 
but in this case there were some other technicalities.
Note: If the active trigger background is set to a different colour, it will result in something like this:
This is because the CSS properties top and bottom repositions the whole <span> element. For some reason, targeting only the <p> element inside it didn’t work, so I used padding-top instead.
The complete solution for this specific use case is then:
.ed-element.preset-image-accordion-v4-default .image-accordion-trigger a > span { padding-top: 90%; }
This (easier?) solution also worked:
You’re right, i did not consider the hover effect. But i’m glad you found a solution that works for you!
The reason that targeting the p element did not work is that it is positioned via flex-settings. So, for example, you could have also used a justify-content: flex-end on the span element instead to move the text element to the bottom.
That’s what I personally like about Sitejet, there are many ways to achieve what you want and you can choose what suits you best.
Thanks Ronnie.
I would never get to the solution without your help. 
