Hello,
​
One of my clients needs a portfolio site for his architecture agency. He wants to display all the projects on the main page in the style of his model (image attached). The images are each the main image of each project. The problem is that some are horizontal and others vertical. He also wants filter buttons to see only design projects, only architectural projects or all projects. When I add a new project, it should be added in this page accordingly to his main image orientation and the category (design or architectural).
When I hover the image, the project title should appear. How can I do this please? I work with elementor pro.
​
Thanks for your help!
​
https://preview.redd.it/68n9khvlqwna1.png?width=1008&format=png&auto=webp&v=enabled&s=e8afaa2d4a018cc482d2e5c8f8ef091686135923
/*Content Show/Hide on Hover*/
selector{
opacity: 0;
transition: 0.5s ease-in-out;
}
selector:hover{
opacity: 1;
}
https://www.youtube.com/watch?v=DhE0w4eC-vQ
You can create the layout first for the “DESIGN PROJECTS”, ARCHITECTURAL PROJECTS” and “ALL PROJECTS”. Save each layout as a template. Use Accordion Button and insert the templates through shortcode. So when clicking the first button it’ll show “DESIGN PROJECTS”, second button will show ARCHITECTURAL PROJECTS” and the last button will show “ALL PROJECTS”
You can check the first comments suggestion for the texts to appear when hovering on the images.
I’m sure there are other ways, but this is another way as well, a bit complicated and not automatic, but it’ll do the job.