Vertical Slider/Grid with changing background image - Support

Hi,

I would love to replicate the feature of the 4 column element from this website: https://www.hahnemuehle.com/en/index.html
So if you hover over the columns the whole background image changes. Is there a way I can create this via LayerSlider? I gave it a shot and tried it with a transparent rectangle shape with 100% height & 25% width. I added an id which I modify via CSS. The problem is, that I can not change the background of the whole slider by hovering above the rectangle. Could you please help me? Or is there a way to build this another way?

Thanks!

March 13, 2022 at 10:57 pm #1344308

Hey Steffen,
Thanks for the link to the demo, but I was not able to create this in the layerslider, I’m not that good with it. But I was able to get pretty close with html, css, & jQuery, I linked to an example in the Private Content area. To create this I used a color section with the min height set to 100% on a page with no sidebar and a transparent header, I then added a code block in the color section with this code in it:

<script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
$('.image-main .nav-mainarea-item').bind('mouseover', function(){
    var myEm = $(this).attr('data-img');
    $('.image-main img').removeClass('is-visible');
    $('.image-main img[data-img = '+myEm+']').addClass('is-visible');
});
})(jQuery);
 });
</script>
<style>
.nav-mainarea {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    z-index: 100;
}
.nav-mainarea .nav-mainarea-item {
display: flex;
    transition: all .3s ease-out;
    width: 25%;
    height: 100%;
    border-right: 1px solid rgba(255,255,255,.5);
    padding: 30px;
    text-decoration: none;
}
.nav-mainarea .nav-mainarea-item .nav-mainarea-text {
    margin-top: auto;
    color: #000;
    transition: all .3s ease-out;
}
.nav-mainarea .nav-mainarea-item h2 {
    margin: 0;
    line-height: 1.6;
    color: #ca0202;
}
.nav-mainarea .nav-mainarea-item:hover .nav-mainarea-text {
    transform: translateY(-45vh);
    
}
.nav-mainarea .nav-mainarea-item:hover {
    text-decoration: none;
}

#top.page-id-3157 #av_section_1 > .container {
	max-width: 2500px;
	width: 100%;
	padding: 0;
}
.image-main img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    opacity: 0;
    z-index: 1;
    object-fit: cover;
    object-position: center;
    width: 100%;
}
.image-main img.is-visible {
    opacity: 1;
    z-index: 1;
    display:block;
}
</style>

<div class="image-main">
<img class="nav is-visible" data-img="1" src="../wp-content/uploads/2022/03/PhotoRag_Metallic_Mood.jpg">
<img class="nav" data-img="2" src="../wp-content/uploads/2022/03/RS171_Hahnemuehle__3_-lpr.jpg">
<img class="nav" data-img="3" src="../wp-content/uploads/2022/03/Hahnemuehle_Notebook_Iconic_A5_Schwarz-black_and_taupe_mood_web.jpg">
<img class="nav" data-img="4" src="../wp-content/uploads/2022/03/hfa_filtration.jpg">

<div class="nav-mainarea">                                 
    <a class="nav-mainarea-item nav" data-img="1" href="#">
        <div class="nav-mainarea-text">
            
                    <h2>Digital FineArt</h2>
                
            Turning images into Art
        </div>
    </a>

    <a class="nav-mainarea-item nav" data-img="2" href="#">
        <div class="nav-mainarea-text">
            
                    <h2>Artist Papers</h2>
                
            The Art of Expression
        </div>
    </a>

    <a class="nav-mainarea-item nav" data-img="3" href="#">
        <div class="nav-mainarea-text">
            
                    <h2>Stationery</h2>
                
            Notebooks & Writing Instruments
        </div>
    </a>

    <a class="nav-mainarea-item nav" data-img="4" href="#">
        <div class="nav-mainarea-text">
            
                    <h2>Filtration</h2>
                
            Technical Applications
        </div>
    </a>             
</div>
</div>

This code includes the html, css, & jQuery one in one, you will need to adjust the image urls to your images and if you want to add links. The background image changes on mouse-over.

Best regards,
Mike

March 17, 2022 at 5:09 pm #1344954

Hi Mike,

WOW! Thank you very much for your effort! I go and test this out and might play arround with some settings.

Thanks a lot!

March 17, 2022 at 8:05 pm #1344974

Rikard

Keymaster

Hi,

Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

March 30, 2022 at 5:15 pm #1346624

Hi,

I have edited the code and it looks really great but cannot set the smooth image loading on hover. The images just pops straight up. Can you maybe help me with that? Is it possible to add something like a fading effect?

Thanks

March 31, 2022 at 1:42 pm #1346740

Hi,
Thanks for the feedback I added a fadeIn keyframe set to 3 seconds to the code below, please give this a try.

<script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
$('.image-main .nav-mainarea-item').bind('mouseover', function(){
    var myEm = $(this).attr('data-img');
    $('.image-main img').removeClass('is-visible');
    $('.image-main img[data-img = '+myEm+']').addClass('is-visible');
});
})(jQuery);
 });
</script>
<style>
.nav-mainarea {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    z-index: 100;
}
.nav-mainarea .nav-mainarea-item {
display: flex;
    transition: all .3s ease-out;
    width: 25%;
    height: 100%;
    border-right: 1px solid rgba(255,255,255,.5);
    padding: 30px;
    text-decoration: none;
}
.nav-mainarea .nav-mainarea-item .nav-mainarea-text {
    margin-top: auto;
    color: #000;
    transition: all .3s ease-out;
}
.nav-mainarea .nav-mainarea-item h2 {
    margin: 0;
    line-height: 1.6;
    color: #ca0202;
}
.nav-mainarea .nav-mainarea-item:hover .nav-mainarea-text {
    transform: translateY(-45vh);
    
}
.nav-mainarea .nav-mainarea-item:hover {
    text-decoration: none;
}

#top.page-id-3157 #av_section_1 > .container {
	max-width: 2500px;
	width: 100%;
	padding: 0;
}
.image-main img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    opacity: 0;
    z-index: 1;
    object-fit: cover;
    object-position: center;
    width: 100%;
}
.image-main img.is-visible {
    opacity: 1;
    z-index: 1;
    display:block;
}
.fade-in-image {
  animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
</style>

<div class="image-main">
<img class="nav fade-in-image is-visible" data-img="1" src="../wp-content/uploads/2022/03/PhotoRag_Metallic_Mood.jpg">
<img class="nav fade-in-image" data-img="2" src="../wp-content/uploads/2022/03/RS171_Hahnemuehle__3_-lpr.jpg">
<img class="nav fade-in-image" data-img="3" src="../wp-content/uploads/2022/03/Hahnemuehle_Notebook_Iconic_A5_Schwarz-black_and_taupe_mood_web.jpg">
<img class="nav fade-in-image" data-img="4" src="../wp-content/uploads/2022/03/hfa_filtration.jpg">

<div class="nav-mainarea">                                 
    <a class="nav-mainarea-item nav" data-img="1" href="#">
        <div class="nav-mainarea-text">
            
                    <h2>Digital FineArt</h2>
                
            Turning images into Art
        </div>
    </a>

    <a class="nav-mainarea-item nav" data-img="2" href="#">
        <div class="nav-mainarea-text">
            
                    <h2>Artist Papers</h2>
                
            The Art of Expression
        </div>
    </a>

    <a class="nav-mainarea-item nav" data-img="3" href="#">
        <div class="nav-mainarea-text">
            
                    <h2>Stationery</h2>
                
            Notebooks & Writing Instruments
        </div>
    </a>

    <a class="nav-mainarea-item nav" data-img="4" href="#">
        <div class="nav-mainarea-text">
            
                    <h2>Filtration</h2>
                
            Technical Applications
        </div>
    </a>             
</div>
</div>

Best regards,
Mike

March 31, 2022 at 2:25 pm #1346745

Great! Thanks a lot!

One last thing (hopefully): Is it possible to set the background of the hovered column to a light grey transparent background?

Thanks!

April 1, 2022 at 1:43 am #1346786

Hi,
In the css above find this rule:

.nav-mainarea .nav-mainarea-item:hover {
    text-decoration: none;
}

and change to this:

.nav-mainarea .nav-mainarea-item:hover {
    text-decoration: none;
    background-color: rgb(128 128 128 / 45%);
}

adjust the color to suit.

Best regards,
Mike

April 1, 2022 at 11:15 am #1346840

Thanks!
We are getting there ;-)
How could I display the images always in full height of the element? In lower width resolution I get a whitespace below the hovered images.

Thank you!

April 1, 2022 at 1:10 pm #1346867