Lay Theme Forum

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

    Project List + Project Thumbnail on Link Hover

    General Discussion
    4
    5
    491
    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.
    • C
      comedowntous last edited by

      Hello —

      I would like to display the projects as a list where the project thumbnails appear on mouseover. I know this is something that has been brought up in the forums in the past.

      http://laythemeforum.com:4567/topic/826/hovering-over-text-showing-thumbnail

      Any tips on where to start?
      Thanks!

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

        Hi @comedowntous

        you totally need advanced skills with jQuery to do this.

        It is possible but like Armin already said – not easy to achieve.

        Roughly:

        1. You need to get the class of the image.
        2. Then you position it with position fixed
        3. Then you hide it
        4. Then you need to write a jQuery which adds a class to it when you hover the title of the project

        You will need to work with each loops.

        If you are further with it – let me know and I might help in with the details.

        Best!

        Marius

        www.mariusjopen.world

        D 1 Reply Last reply Reply Quote 0
        • C
          comedowntous last edited by

          Yes - Please. I saw an example you provided a user somewhere in the forum. I'm definitely up to the task.
          Thanks!

          1 Reply Last reply Reply Quote 0
          • D
            DAAVID @mariusjopen last edited by

            @mariusjopen Hi Marius, I am trying to achieve almost the exact same thing explained and got stuck just before the finish line I guess..
            Made a project thumbnail in Gridder and classified .projectlinks. Hid the image with CSS and want them to appear behind the Text from Thumbnail. Made a class .active + mouseenter.
            Any idea what I am mixing up? Hiding the thumbnail images on the page works totally fine, but they just won't appear hovering them. (btw. getting no error in inspector console). Any help I is a lot appreciated!

            CUSTOM CSS

            .col[data-type="text"] img {
            position: absolute;
            z-index: -1;
            display:none;
            }
            .active {
            display: block!important;
            }

            CUSTOM <HEAD> CONTENT

            <script>

            jQuery(function($) {
            $('a.projectlink').on('mouseenter', function(event){
            $(this).addClass("active");
            });
            });

            </script>

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

              hey everybody,

              im thinking about doing a plugin that does this one day
              im sorry for not helping you how to do this in a custom way, i got too many other things to do

              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