Lay Theme Forum

Hi,
I am wondering if the appearance of an image caption on top of an image when you hover over it is still possible. I have used the CSS code that is in the post here, but I don't see how this works with the new versions. I get a darker image when hovering, but no captions anymore. Can I add a lightbox caption and let that appear somehow?

.slug-editions .img img{
transition: all 300ms ease;
}

.slug-editions .img:hover img{
filter: brightness(0.5);
}

.slug-editions .img .caption{
opacity: 0;
transition: opacity 300ms ease;
}

.slug-editions .img:hover .caption{
opacity: 1;
}

.slug-editions .img .caption{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Thanks :) works again!

Hi,
I always had an image as an intro that would fill the screen in the mobile version. I could then tilt my phone to left or right and it would move through the image. It looked super cool. Now the image is scaled to the screen width and it just moves up and down. Looks completely boring. Has this been changed? I want the old function back :)
Desktop still looks the same.
Website: https://intrastruktur.me

Cheers,
Louis

Would also like to have that :)

@arminunruh Thanks! I am very new to this and just copy paste pieces together :)
How can I exclude the mobile menu bar from my script? I want it to become 100% opacity instead of 0%. How do I just target the desktop menu bar without the mobile menu bar? I am having the script in Custom head content right now.
Best,
Louis

Now I figured it out. DOnt know why it didnt work in the beginning. Added the blur filter and some transperancy with the rgba.

<script>
    jQuery(document).ready(function(){
      jQuery(window).scroll(function() { // check if scroll event happened
        if (jQuery(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
            jQuery(".navbar").css("background-color", "rgba(255, 255, 255, 0.4)"); // if yes, then change the color of class "navbar" to white (#ffffff) and 0.4 opacity
         // jQuery(".navbar").css("background-color", "#ffffff"); // if yes, then change the color of class "navbar" to white (#ffffff)
            jQuery(".navbar").css("backdrop-filter", "blur(5px)"); // if yes, then change the blur to 5px
        } else {
            jQuery(".navbar").css("background-color", "transparent"); // if not, change it back to transparent
            jQuery(".navbar").css("backdrop-filter", "blur(0px)"); // if yes, then change the blur to 0px

        }
      });
    });
</script>

Hi,
Thanks for the script. Works great! Anybody knows how I can add a blur instead of just having the menu bar just white? I found this backdrop filter, but don't really know how to implement it. Help is much appreciated!

-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);

Best,Louis

I have searched for hours and of course just after creating the post I have finally found a code which seems to work well so far :)
source: https://stackoverflow.com/questions/9377951/how-to-remember-scroll-position-and-scroll-back (last answer)

window.onbeforeunload = function () {
        var scrollPos;
        if (typeof window.pageYOffset != 'undefined') {
            scrollPos = window.pageYOffset;
        }
        else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
            scrollPos = document.documentElement.scrollTop;
        }
        else if (typeof document.body != 'undefined') {
            scrollPos = document.body.scrollTop;
        }
        document.cookie = "scrollTop=" + scrollPos + "URL=" + window.location.href;
    }

window.onload = function () {
    if (document.cookie.includes(window.location.href)) {
        if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
            var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/);
            document.documentElement.scrollTop = parseInt(arr[1]);
            document.body.scrollTop = parseInt(arr[1]);
        }
    }
}

Re: How to return to the exact same scroll position when going back to previous page

Hej,
I have a page with a lot of project thumbnails and I would like to return to the same scroll position after returning from a project. I read through the other threads and tried out some code people posted on stackflow but nothing seems to work properly. Is there anybody who has had the same problem and has found some code?

Otherwise, is there a way to disable lazy loading only on the specific page as it would probably work on a static page but I dont want to have all pages static.

Thanks, Louis

Hi!
I want to have a normal full screen slider with "Give elements a max-width and max-height and center them" applied. The problem is that it fills the whole page which is in my case behind the menu bar. The Top frame function does not work. I can use 70% but it separates the navigation points from the images and I don't use all the space. Is there some possibility to give it a top frame of 10% like I do for all other pages?
90%

70%

Page: lsimwunderland.com
Cheers, Louis