Forums

Give help. Get help.

  • # November 19, 2016 at 4:49 am

    Hello,

    It has been 4 hours since i am trying to have 2 fullscreen column on my homepage, where each column has a background image and when you hover it ( the column) its background image covers all the page. With CSS only. Here is an exemple : http://bartabas.fr/

    I am using wordpress ( divi theme).

    Thank you for you help.

    # November 19, 2016 at 7:06 am

    Looks OK to me. What’s your question?

    # November 19, 2016 at 5:02 pm

    Thank you for your reply.

    I have created a copy of what I have now : http://petsafety.info/

    1. What I want :
      when you go to column CAT, the background image “CAT” fill the whole page…same for The DOG.
    2. “blablabla” and the button “DISCOVER” should not be displayed. Only when you hover IT.

    Result – exemple : http://http://bartabas.fr/

    Thank you for you help.

    # November 20, 2016 at 6:21 am

    Here’s the beginning of an idea:

    Demo

    # November 21, 2016 at 3:53 am

    Waoouuu!
    Thank you so much Shikkediel for your help, it works !
    Look at here : http://petsafety.info/

    just one thing, How do I resize the fullscreen images please ?

    Thank you thank you thank you!!!

    # November 21, 2016 at 4:28 am

    Glad to help. Maybe you could explain what the issue is? Getting background images correct for all screen size ratios is usually troublesome. Using cover is as easy and close as it gets. But from what I suspect might be the trouble, background-position could possibly help – to center the fullscreen images:

    .et_pb_row.et_pb_row_0.et_pb_equal_columns.et_pb_gutters1.et_pb_row_fullwidth {
      background-position: 50% 50%;
    }
    

    That’s a horrible selector by the way (corresponding with .parent() in the script) but I thought I’d be as specific as possible with it.

    # November 21, 2016 at 4:37 am

    I have an idea that it could also be done with CSS alone by the way. But it’s just so very convenient with jQuery. And a bit of script won’t hurt the page.

    # April 18, 2017 at 3:37 pm

    hello, may be you could help me? i m coming back for a question and you helped me once.
    here is my question:
    I’d like to have a transition effect between the white color background and the pink background of this page http://petsafety.info/cat-page/
    The color must smoothly fade when you scroll the page
    a bit like this exemple: http://codepen.io/Funsella/pen/dpRPYZ

    Please I am using wordpress and i only know how to use CSS code. If it is Jquery please let me know where I should put the code, I am using DIVI theme.

    Thanks a lot!

    # April 19, 2017 at 7:55 am

    I am not familiar with the Divi them (or WP) so I couldn’t tell you how to add a custom script…

    But this ought to work, as far as I can tell:

    Edit – see next post.

    # April 19, 2017 at 7:58 am

    Code apparently gets messed up when I insert it.

    Pasted into a pen

    This is the only CSS you’d need to add:

    #layer {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      background: rgba(204,28,107,0.91);
      opacity: 0;
    }
    
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag