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. How to fix a hover image to a position when rescaling browser

How to fix a hover image to a position when rescaling browser

Scheduled Pinned Locked Moved General Discussion
4 Posts 3 Posters 114 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.
  • M Offline
    M Offline
    Miquel Pérez
    wrote on last edited by Miquel Pérez
    #1

    Hi,

    I have some hover images that i moved to the left of my site but when i rescale the browser the images are not fixed to it's "natural" position. I will attach a video link to show it.

    https://youtu.be/w4pWg73ejwc

    The CSS looks like this:

    .lay-imagehover-region img{
    margin-left:-24.5vw;
    margin-top:4vh;
    width: 48% !important;
    height: auto !important;
    position: absolute;
    }
    The link of the site is: www.juliaesque.com

    I will really appreciate a response, thanks.

    1 Reply Last reply
    0
    • G Offline
      G Offline
      gschill
      wrote on last edited by
      #2

      Hi,
      have you found a solution for this problem?
      Would be great, if you could share it.

      Thank you very much

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

        Hi,
        I found a solution, that was working for me.
        Maybe it helps someone … (and maybe the code has to be improved … sorry I am not a professional …)

        .lay-imagehover-region img {
        position: absolute;
        width: 35% !important;
        height: auto !important;
        top:0 !important;
        padding-top: 1.5%;
        margin-left: 27.5vw;
        vertical-align: top !important;
        transform: translateY(-50%) !important;
        transform: translateX(-50%) !important;
        }

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

          Thank you for adding your solution @gschill !! ⭐️

          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
          D
          Double
          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