Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Image swap with mouse hover with <div> responsive size?

    General Discussion
    2
    4
    1652
    Loading More Posts
    • 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.
    • D
      dsong3832 last edited by

      Hello,

      Trying to combine css and html code to make an image change (two images with same sizes) with a simple mouse hover. Since the img src can't be changed with css only, I'm using a <div class> insert. However, I'm wondering if it's possible to have this <div> section also conform to the responsive size changes as in with my other images on the project as of now (The div section is in the middle of images, and when I set the css size fixed with px values, it remains the same regardless of window size).

      Could anyone help? Thanks!

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Hi @dsong3832
        this is very difficult to understand.

        Can you show us a little sketch or even a link to your website?

        You could use background images of CSS:
        https://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • D
          dsong3832 last edited by

          Hello @mariusjopen

          Sorry about the confusion. Though I'm also experimenting with different things on the website and unable to share the actual link, here's sort of what I have so far:

          In Laytheme - Custom CSS & HTML, I have set up the css as following:

          Hover {
          background: url('image A.jpg');
          width=100px
          height=150px
          }
          div:hover {
          background: url('image B.jpg');
          width=100px
          heigh=150px
          }

          Now, I've inserted a following code, using the "page" editor section -> HTML Code, in between images that are displayed on my current page, as in the following:

          <div id=hover></div>

          And it shows the hovering images perfectly! The only problem is... My whole page is now responsive to the window size, meaning the size of image changes according to your window size. Yet, since I've dedicated the pixel width to <div> code, that's the only image that doesn't change its size and goes out of whack in proportion when I change the window size.

          However, I realized that <div> doesn't really show up unless I dedicate the pixel width and height. So my question is, is it possible to make my <div> hovering image also respond to the changes in window size?

          Thank you!

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Hi @dsong3832
            ok. Now I understand.

            Your solution is a quick and dirty solution. but possible. I would not use it for a complex website. But for a portfolio website which you build yourself it should be fine.

            Otherwise you need to use jQuery.

            First of all your code looks pretty messed up. Try this:

            #hover {
            background: url('image A.jpg');
            background-repeat: no-repeat;
            background-size: contain;
            width: 30vw;
            height: 10vw;
            }
            
            #hover:hover {
            background: url('image B.jpg');
            }
            
            <div id="hover"></div>
            

            Play around with the size to see what fits you the best.Also you can play around with the background-image-size.

            I hope I could help!

            Have a good day!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • First post
              Last post

            Before you post

            Use the Search Feature. Maybe there is already a solution to your issue.

            1. Update Lay Theme and all Lay Theme Addons
            2. Disable all Plugins
            3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
            4. Now see if your problem solved itself
            5. Go here, see if your problem is listed here:
            Troubleshooting

            When you post:
            1. Post a link to where the problem is
            2. If the problem is difficult to explain, post screenshots / link to a video to explain it

            Thanks!

            Online Users

            Recent Topics

            • C

              image carousel bugging out

            • N

              help needed with cleaning up and optimising lay theme portfolio website

            • R

              Html5 Video Player issue

            laytheme.com