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. Image Hover addon size and place

Image Hover addon size and place

Scheduled Pinned Locked Moved General Discussion
9 Posts 4 Posters 680 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.
  • N Offline
    N Offline
    Nunomaio
    wrote on last edited by
    #1

    Hello,
    I'm using the image hover addon, I have list and I want the images to appear always in the same place (left) with the same high when using vertical images and same with when using horizontal images. Also would be great if the images can resize depending on the size of the window you are viewing it.

    Is it possible?

    Thank you in advance

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

      Dear @Nunomaio

      This is possible, Within the Imagehover Addon options you can use % instead of px to define widths and heights, if more is needed you could use VW or VH units (viewport width & viewport Height), then the images will be scaled based on a users browser window (viewport)

      If you wish to force the Images to the left, i would suggest using the "fixed % centered" option and then adding some Custom CSS that pushes it to the left.

      Screenshots of what you wish to achieve is always helpful as well as a link to the Website in question.

      For more information on Custom CSS styling:
      https://laytheme.com/documentation.html#custom-css-styling

      Best wishes
      Richard

      1 Reply Last reply
      0
      • N Offline
        N Offline
        Nunomaio
        wrote on last edited by
        #3

        @Richard-K thank you so much for your answer!

        Screenshot 2021-02-26 at 13.23.46.png

        So, this is what's looking like right now, and sometime the images appear in the right side of the page behind the text.

        Screenshot 2021-02-26 at 13.25.43.png Screenshot 2021-02-26 at 13.26.00.png

        This is what im looking for, images always in the same place with the same size, and same margins.
        And I want the images to resize in the same place depending on the viewport size. Is it possible?

        Here's my website link: nunomaio.com

        Thank you! :)

        Best
        Nuno

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

          Dear @Nunomaio

          First you need to set the options for Imagehover;
          Fixed & centered, then set your Widths and Heights:
          Screen Shot 2021-02-27 at 11.18.00 AM.png
          From there you can address the 'imagehover region' with CSS:

          .lay-imagehover-region
          

          But one must come before the other :)

          Best wishes
          Richard

          1 Reply Last reply
          0
          • N Offline
            N Offline
            Nunomaio
            wrote on last edited by
            #5

            Hi @Richard-K
            Thanks for you answer!

            I got a bit lost with the css part, can you explain me how the code works please? and what i should write.

            Thank you!

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

              Dear @Nunomaio

              Sure :)

              All the Images used with Imagehover are there, however they have a Opacity:0 so that they cant be seen - a specific image is given visibility when the link is hovered and we can see it.

              The Images are grouped in a <div> with the Class: "lay-imagehover-region"

              We can use this class to Target all the images collectively and then shift them as a group to the left as you wished. This is why having them set with the option 'Fixed & centered' will help you.

              Custom CSS Code can be placed either in the CSS area in > Customize > CSS or - In "Lay Options - Custom CSS & HTML"

              To target the ImageHover region with CSS:

              .lay-imagehover-region{
              
              //insert you code here//
              
              }
              

              There are a few options for moving the group and this depends on you and what you need for your design:

              https://www.w3schools.com/css/css_margin.asp

              https://www.w3schools.com/css/css3_2dtransforms.asp

              Also the 'Calc()' function may help you:
              https://developer.mozilla.org/en-US/docs/Web/CSS/calc()

              Also to remember you can use different 'units' depending on your needs:
              https://www.w3schools.com/cssref/css_units.asp

              This is unlikely what you will end up using but to help you, some code may look like this:

              .lay-imagehover-region{
              
              margin-left:50px;
              
              }
              

              '!important is used when we want to override or Force a particular CSS to be used, note that it should be used sparingly and only if needed. It will override any current CSS set with Lay Theme. In this Case if the imagehover region already had a 'margin-left' CSS entry, your new entry would take precedence:

              .lay-imagehover-region{
              
              margin-left:50px !important;
              
              }
              

              Hope this have been helpful and best wishes - Remember Google is your friend and there is such helpful content out there for CSS.

              Richard

              1 Reply Last reply
              0
              • A Offline
                A Offline
                AUR
                wrote on last edited by
                #7
                This post is deleted!
                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  Miquel Pérez
                  wrote on last edited by
                  #8

                  @Richard said in Image Hover addon size and place:

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

                  Hey Richard!

                  I have managed to move the image to the sides but the scaling on diferent browser's sites is not working properly. How do you use the VW and VH to set this responsive to every window size?

                  Thnks

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

                    Dear Miquel

                    @Miquel-Pérez

                    What is your setup & are you able to post a link to your website 🔍 Also if you could post your current CSS for these changes?


                    Best wishes
                    RIchard
                    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
                    A
                    alasdair17
                    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