Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. link with fullscreen background image on hover

link with fullscreen background image on hover

Scheduled Pinned Locked Moved General Discussion
20 Posts 5 Posters 1.3k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • L Offline
    L Offline
    leo01
    wrote on last edited by
    #1

    Hello,
    I would like to have a landing page with a bit of type that links to the different categories of my photography portfolio.
    And I would live if those links would have a fullscreen image connected to them that shows up on mouse over (behind the type). To if the user hovers on les say "people" he gets a people image as a fullscreen background behind the type layer.
    Is that somehow possible? Would I need javascript or should css work?

    If so would it be possible to hide the primary menu on that one specific page?

    Im not good in coding so any help is appreciated.

    Thanks
    Leo

    1 Reply Last reply
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      Dear @leo01
      with CUSTOM CSS you can do it. No jQuery needed I assume.

      Also you can hide specific parts like the navigation on specific pages.

      Have a look here:
      http://laytheme.com/documentation.html#custom-css-styling

      Hope I could help a bit!

      Best!

      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • G Offline
        G Offline
        giselach
        wrote on last edited by
        #3

        Hello, I was actually trying to do the same, but could you give me some hints on the css? I have the laytheme addon hover, and I have set my hover images over the content on purpose. Also sizes regarding width and height are 130%, although it seems it's not fullscreen. They are still adjusting based on the width. how could it be?

        1 Reply Last reply
        0
        • RichardR Offline
          RichardR Offline
          Richard
          Global Moderator
          wrote on last edited by
          #4

          Dear @giselach

          Unsure about your setup and any custom css you have currently.
          Can you post a link to your website if able? πŸ”

          The Goal is to have the images fullscreen yes?


          Best wishes 🌝
          Richard
          G 1 Reply Last reply
          0
          • RichardR Richard

            Dear @giselach

            Unsure about your setup and any custom css you have currently.
            Can you post a link to your website if able? πŸ”

            The Goal is to have the images fullscreen yes?


            Best wishes 🌝
            Richard
            G Offline
            G Offline
            giselach
            wrote on last edited by
            #5

            @Richard the website is https://groups.uni-paderborn.de/digitale-ausstellung-bildhauerei/

            and tha idea is that whenever you go over the menu categories and an image pops up, all the background is white (so you can't see what's behind).

            so I guess would mean either applying a white overlay behind the hover images (so you don't see the background) or keeping the image full screen.

            1 Reply Last reply
            0
            • RichardR Offline
              RichardR Offline
              Richard
              Global Moderator
              wrote on last edited by
              #6

              Dear @giselach

              I see your content exists as a footer, therefore you would like some code saying, when we hover over an link or when the class .show is added to the imagehover region then set the footer to have opacity:0


              Best
              Richard
              1 Reply Last reply
              0
              • G Offline
                G Offline
                giselach
                wrote on last edited by
                #7

                @mariusjopen said in link with fullscreen background image on hover:

                http://laytheme.com/documentation.html#custom-css-styling

                Hello Richard! thanks for the answer, but I am not sure I am getting what you mean.

                I want my hover images to be fullscreen with white background. I thought about uploading hover images with no background and then manually add a white background. In that. sense, the hover images won't be cut (if scaled) and will be fullscreen.

                Also, as my footer is set as the menu, I am having some trouble on different screen sizes there are times where I can't see the full menu (it is cut) is there any way to make it fit the screen?

                Thanks!!

                1 Reply Last reply
                0
                • RichardR Offline
                  RichardR Offline
                  Richard
                  Global Moderator
                  wrote on last edited by
                  #8

                  Dear @giselach

                  Sorry if my reply was short, i can explain more 🌝

                  The Imagehover Addon images are all stacked within an "Imagehover region" they are already present on the page, but are hidden from us "invisible" . When a user hovers over a link, the "Class" show is added to the Imagehover region. The show class adds some CSS to the Image saying " Dont be invisible anymore, make yourself visible! " and so we see the image. When the user moves off the link, the class show is removed from the Imagehover region and so too is the CSS that was telling the image to be visible.

                  It would be best to make use of this action occurring. This show class being added and then removed. You can take advantage of this for what you are trying to achieve.

                  If you want there to be a white background with the Images, you don't necessarily have to removed all the text, or make each image have its own fullscreen background container that is white.

                  Your text with links exists within the "footer-region"

                  You could say; " When the class show is added to the Imagehover region -- then make the "footer-region" invisible"

                  "when the class show is added to the imagehover-region then set the footer-region opacity to 0"

                  By setting your footer (your main content) to an opacity of 0 then to the user it would seem white anyway because your background is white and the text would become completely transparent.

                  Hope that better explains the process 🌻

                  Also, as my footer is set as the menu, I am having some trouble on different screen sizes there are times where I can't see the full menu (it is cut) is there any way to make it fit the screen?

                  The following Custom CSS for your footer region is causing the issue:

                  max-height: 100vh !important;
                      max-width: 100vw !important;
                      position: fixed;
                  

                  If the text is set in "pixels" (px) which is a fixed unit then it will likely go over on smaller screens. If the text all added up equals over 700px in height then on screen less that 700px height, it will go over.
                  You should use a responsive unit so that it resizes based on the screen size. If the text when all added together equals 80% of the screen size in height, then even on a smaller screen it would still try to fit into 80% of the screen height.

                  You can see how different "Units" apply and their behaviour here:

                  https://www.w3schools.com/cssref/css_units.asp


                  best wishes
                  Richard
                  1 Reply Last reply
                  0
                  • G Offline
                    G Offline
                    giselach
                    wrote on last edited by
                    #9

                    Dear @Richard Thanks for the answers and the time you've given me

                    regarding the hover image: I would still to keep the footer-region visible (and over the image.

                    regarding the "responsive" footer height I've changed the
                    max-height: 100vh !important;
                    max-width: 100vw !important;
                    position: fixed;

                    to:
                    max-height: 100% !important;
                    max-width: 100% !important;
                    position: fixed;

                    but it still doesn't work... specially on Firefox and Safari. When I resize the tab and make it shorter the footer is not acting as responsive so it gets "cut".

                    However If I say:
                    max-height: 90% !important;
                    max-width: 90% !important;
                    position: fixed;

                    the footer-region gets even bigger... shouldn't it be the opposite?

                    I'm quite desperate!!

                    Looking forward to your reply,

                    1 Reply Last reply
                    0
                    • G Offline
                      G Offline
                      giselach
                      wrote on last edited by
                      #10

                      Hello, I was wondering if someone had any new ideas in order to solve the issue, Thanks :)

                      1 Reply Last reply
                      0
                      • D Offline
                        D Offline
                        danny
                        wrote on last edited by
                        #11

                        Dear @Richard,

                        Gisela and me work on this together. Would be amazing if you got back to us about the footer. The footer (=menu) is to small in Chrome but cut in Firefox and Safari. The footer should be completely visible in any desktop screen.

                        https://groups.uni-paderborn.de/digitale-ausstellung-bildhauerei/

                        Thanks a lot. Appreciate your help!

                        Best wishes

                        Daniel

                        1 Reply Last reply
                        0
                        • RichardR Offline
                          RichardR Offline
                          Richard
                          Global Moderator
                          wrote on last edited by
                          #12

                          Dear Daniel

                          @danny @giselach

                          The font-size being set to px may be a reason. This is a fixed unit:

                          https://www.w3schools.com/cssref/css_units.asp

                          If the screen is only a certain dimension of pixels then the content may well be too big. If you want the text to always remain visible even when the browser is resized you would want to look into Responsive text

                          https://www.w3schools.com/howto/howto_css_responsive_text.asp

                          You could use % font sizes, setting this in Text Formats:

                          Screen Shot 2022-04-03 at 7.51.24 PM.png


                          Hope this helps you and Gisela πŸ–Ό
                          Richard
                          1 Reply Last reply
                          0
                          • G Offline
                            G Offline
                            giselach
                            wrote on last edited by
                            #13

                            Hello @Richard thanks for the answer,!!!

                            although it still does not seem to work. now it's scaling down every time I resize the screen size, yes but in terms of width, not height. any other suggestions??

                            1 Reply Last reply
                            0
                            • RichardR Offline
                              RichardR Offline
                              Richard
                              Global Moderator
                              wrote on last edited by
                              #14

                              Dear @giselach

                              I see πŸ€”
                              In text Formats each format has it's on HTML Class that your can see in the title area of the format, e.g HTML Class: _Default

                              You may want to use the unit vh which is based on viewport height as apposed to vw which is veiwport width:

                              https://alligator.io/css/viewport-units/#:~:text=vh stands for viewport height,when the viewport is resized.

                              You could apply this vh unit to your Text format e.g (here targeting the default text format)

                              ._Default{
                                   font-size:5vh;
                              }
                              

                              Best wishes
                              Richard
                              G 1 Reply Last reply
                              0
                              • RichardR Richard

                                Dear @giselach

                                I see πŸ€”
                                In text Formats each format has it's on HTML Class that your can see in the title area of the format, e.g HTML Class: _Default

                                You may want to use the unit vh which is based on viewport height as apposed to vw which is veiwport width:

                                https://alligator.io/css/viewport-units/#:~:text=vh stands for viewport height,when the viewport is resized.

                                You could apply this vh unit to your Text format e.g (here targeting the default text format)

                                ._Default{
                                     font-size:5vh;
                                }
                                

                                Best wishes
                                Richard
                                G Offline
                                G Offline
                                giselach
                                wrote on last edited by
                                #15

                                @Richard said in link with fullscreen background image on hover:

                                font-size:5vh;

                                Dear Richard!!!! now it worked! THANKS A BUNCH!!!!!! :-)

                                1 Reply Last reply
                                1
                                • G Offline
                                  G Offline
                                  giselach
                                  wrote on last edited by
                                  #16

                                  @Richard regarding the hovered image, how can I make it appear fullscreen? I know I should go for the same method you've just told me, 100vh and 100vw, but then I guess the image has it's own dimensions so either would appear as "cut" or incomplete. Also every hover image has its own id, is there a way to set a white background for all hovered images ?

                                  so every time I hover an element that has a hover image set, it's background is white.

                                  1 Reply Last reply
                                  0
                                  • RichardR Offline
                                    RichardR Offline
                                    Richard
                                    Global Moderator
                                    wrote on last edited by
                                    #17

                                    Dear @giselach

                                    css selectors:
                                    The container that holds the image-hover images:

                                    .lay-imagehover-region 
                                    

                                    The images inside the Image hover container:

                                    .lay-imagehover-region img
                                    

                                    Example:

                                    .lay-imagehover-region {
                                         background-color:white;
                                    }
                                    

                                    "how can I make it appear fullscreen?"

                                    https://www.w3schools.com/howto/howto_css_full_page.asp


                                    "is there a way to set a white background for all hovered images ?"

                                    If it was fullscreen would you need the background to be white?

                                    You could target either the container or the images themselves to add background colours:

                                    https://www.w3schools.com/cssref/pr_background-color.asp


                                    Best wishes
                                    Richard
                                    G 1 Reply Last reply
                                    0
                                    • RichardR Richard

                                      Dear @giselach

                                      css selectors:
                                      The container that holds the image-hover images:

                                      .lay-imagehover-region 
                                      

                                      The images inside the Image hover container:

                                      .lay-imagehover-region img
                                      

                                      Example:

                                      .lay-imagehover-region {
                                           background-color:white;
                                      }
                                      

                                      "how can I make it appear fullscreen?"

                                      https://www.w3schools.com/howto/howto_css_full_page.asp


                                      "is there a way to set a white background for all hovered images ?"

                                      If it was fullscreen would you need the background to be white?

                                      You could target either the container or the images themselves to add background colours:

                                      https://www.w3schools.com/cssref/pr_background-color.asp


                                      Best wishes
                                      Richard
                                      G Offline
                                      G Offline
                                      giselach
                                      wrote on last edited by
                                      #18

                                      @Richard Hello Richard ! thanks for the answer,

                                      but actually that's what I did long ago and seems not to affect the hover image, so, i'm quite stuck there.

                                      Ideally we should just make the .lay-imagehover-region to scale and adapt to the screen size. But it's just not happening. When I tagged .lay-imagehover-region img it just changed it's position, got smaller and couldn't control it anyway ...

                                      1 Reply Last reply
                                      0
                                      • RichardR Offline
                                        RichardR Offline
                                        Richard
                                        Global Moderator
                                        wrote on last edited by
                                        #19

                                        Dear @giselach

                                        You can change the dimensions of your Imagehover region within > Lay Options > Imagehover Addon > Widths & Heights :

                                        Screen Shot 2022-04-16 at 4.00.01 PM.png

                                        Settings for a 'row' within the Gridder may also be of interest:

                                        https://laytheme.com/documentation/gridder-rows.html


                                        Best wishes 🌝
                                        Richard
                                        1 Reply Last reply
                                        0
                                        • G Offline
                                          G Offline
                                          giselach
                                          wrote on last edited by
                                          #20

                                          Hello Richard, thanks again for your patience. Tough nut to crack… this i know, I actually have it in 100%fand 120% from the beginning, but as it stays for β€œmaximum” it can still go smaller! Any other ideas?

                                          EF17E0F5-59B6-4407-9D9B-23365C7B4853.png

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          I also code custom websites or custom Lay features.
                                          πŸ’Ώ Email me here: πŸ’Ώ
                                          info@laytheme.com

                                          Before you post:
                                          1. When using a WordPress Cache plugin, disable it or clear your cache.
                                          2. Update Lay Theme and all Lay Theme Addons
                                          3. Disable all Plugins
                                          4. Go to Lay Options β†’ Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                                          This often solves issues you might run into

                                          When you post:
                                          1. Post a link to where the problem is
                                          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                                          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                                          Online Users
                                          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                                          laytheme.com
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Search