Skip to main content

Hover Overlays and Positioning Question

Carl Sollenberger

So I am going to be working on some fun blog stuff this summer. One of the rabbit holes I have gone down is hover overlay effects. Not really a blog thing, but since I started this journey I must finish it...

I have learned how to create my own basic hover/overlays with HTML & CSS and want to know if I can do the layout in Brizy rather than HTML.

1- I can make a single column, and than drop another single column inside. Can I use CSS to give the outer/parent column a position of Relative, the inner/child column a position of Absolute and than zero out top, left, right and bottom on the inner column to have it pop up on top of the parent column the same way I would with HTML divs? If I could, then I would like to create a basic hover transform effect....

2- Another question: When I use CSS to assign a simple opacity transition from 0% to 100% on hover - why does it not work correctly? It glitches out the page and everything below it.

In a nutshell, I am trying to figure out how to design my divs/columns in Brizy rather than using HTML and an embed... 

Thanks!

0

Comments

3 comments

Date Votes
  • KC George

    Hi Carl,

    Do you have a page where we can see the hover overlay feature you are referring to? May be it is possible to implement the same design without adding any CSS/HTML;  just with the Brizy UI.

    0
  • Carl Sollenberger

    Hi KC George.

    I will post the link below. Please note that on my example I am aware that the clip path is cutting into my border... I'll work on figuring out a good solution to that issue after I figure out if I can do an overlay like this all within Brizy rather than an HTML embed. 

    https://private.westbrookadvertising.com/

     

    0
  • KC George
    • Edited

    Hi Carl,

    I tried to reproduce the hover overlay effect in Brizy. There is no easy way to implement the design using the UI.

    However you can use your HTML CSS code with Brizy. Here is my test page. https://digital-works.brizy.site/race-car 

    Please follow this procedure. https://jmp.sh/nPA9wFY

    1. Drag and drop the 'Column' element
    2. In one of the columns, drag and drop the 'Embed' element
    3. Copy paste the HTML code in the embed element
    4. Copy paste the CSS to the element CSS by clicking on Settings- Styling- Advanced  - Custom CSS
    0

Please sign in to leave a comment.

Didn't find what you were looking for?

Ask a Question