Images appear on link hover

[soyfranasensio]

Hi, is it possible to retake this thread with this project? I am very interested to know how I can make this menu for my website!
Thank you very much!

[sblck]

Hello party people, can we discuss this topic again? I would be very interested about how to implement the "show image on text hover" stuff :)

cheers

[mariusjopen]

Hi @sblck
right now there still is no solution yet.

I can imagine it to work by setting up a Thumbnail-Project-List. And then using Custom CSS and jQuery to hide and show images on hover.

We hope to integrate this feature in the future.

To all of you a good start into the week!

Marius

[sblck]

Hey there im working on a little workaround which is kinda lame when youre a coding noob like me.
Anyway, i modified an exisitng fiddle to this:

http://jsfiddle.net/seblock/b6wuj3er/

But i cant seem to figure out how to make it work in lay. I copy the css part in the custom css field, the js part (wih <script> tags) in the custom head field, and the html part in a gridder text bos using the <> source code box.
But i cannot seem to get it to work correctly, this is the result.

What am i doing wrong here? Something with the classes?

Thanks so much!

[edgrbnz]

I’d like to give this a push.
Would be cool to have this inside lay or at least a guide on how to do so. If anyone would like to share their working code, that would be super nice.

I’ve been trying to implement this while using this codepen as a working example. But unfortunately I don’t seem to be able to get this to work…

Any help or insight is very much apprechiated!

[mariusjopen]

Dear @sblck
please also have a look here:
http://laytheme.com/documentation.html#custom-javascript
That might help with your JSFiddle example.

Best!

Marius

[edgrbnz]

I got it to work with the help of a friendly dev 🙂

It’s a bit messy in the gridder since you need to paste classes and images in the code-view text-editor. I’ll share some code but you may need to know a fair amount about CSS, HTML and jQuery to alter it for your needs:

Custom HTML at top:

<script>
// Hover Folio
    function hover_folio() {
        var wrapper = $('.hoverFolio');

        if (!wrapper[0] || wrapper[0].hoverFolio) {
            return;
        }

        wrapper[0].hoverFolio = true;

        var images = wrapper.find(".hoverFolio-image");
        var links = wrapper.find(".hoverFolio-link");

        var currentImage;

        links.each(function (index) {
            $(this).on("mouseenter", function () {
                if (currentImage) {
                    currentImage.hide();
                }

                currentImage = images.eq(index);

                if (currentImage) {
                    currentImage.show();
                }
            });
        });

        links.on("mouseleave", function () {
            if (currentImage) {
                currentImage.hide();
            }
        });
    }
    $(document).ready(function() {
       hover_folio();
       // Every time a new page is shown, try to initialize the hoverFolio effect
       window.laytheme.on('newpageshown', hover_folio)
    });
}(jQuery))
</script>

Custom CSS:

.hoverFolio {
/*basic styling for your text object*/
    margin: auto !important;
}

.hoverFolio-links {
/*that’s the wrapper for the links which also defines the image height in relation to your text block*/
    position: relative;
    z-index: 1;
    padding: 5vw 0;
}

.hoverFolio .hoverFolio-images img.hoverFolio-image {
/*that’s your image positioning*/
    position: absolute;
    object-fit: contain;
    width: auto;
    height: 100%;
    top: 0;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: none;
}

Hover golio (gridder Content):

Paste into code-view of the gridder Element

<p class="hoverFolio-links">
	<a class="hoverFolio-link" href="https://linktosomewhere.com">Lorem</a>,
	<a class="hoverFolio-link" href="https://linktosomewhere.com">Ipsum</a>,
	<a class="hoverFolio-link" href="https://linktosomewhere.com">Dolor</a>,
	<a class="hoverFolio-link" href="https://linktosomewhere.com">Sit</a>,
	<a class="hoverFolio-link" href="https://linktosomewhere.com">Amet</a>,
</p>

<div class="hoverFolio-images">
	<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
	<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
	<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
	<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
	<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
</div>
}

I hope this helps!

---

Nonetheless this would be super nice to have as a feature or plugin in the future!
It might make sense to combine it with the background positioning thing I described over here

---

PS: If someone is able to make this a bit cleaner, or something I did doesn’t make much sense 👉 Feel free to paste some changes/corrections!

[mariusjopen]

Dear @edgrbnz
again that you for your help. it is very much appreciated.
Happy to have the forum active :-)

All the best!

Marius

[edgrbnz]

Hey @mariusjopen 🙃
As long as I have some spare time and feel like I can contribute anything helpful I’m happy to help / share my thoughts.

💐💐💐

[comedowntous]

@edgrbnz said in Images appear on link hover:

.hoverFolio {
/basic styling for your text object/
margin: auto !important;
}

.hoverFolio-links {
/that’s the wrapper for the links which also defines the image height in relation to your text block/
position: relative;
z-index: 1;
padding: 5vw 0;
}

.hoverFolio .hoverFolio-images img.hoverFolio-image {
/that’s your image positioning/
position: absolute;
object-fit: contain;
width: auto;
height: 100%;
top: 0;
left: 50%;
bottom: 0;
transform: translateX(-50%);
display: none;
}

This did not work for me even after changing $ to jQuery - anyone else having trouble setting this up?