Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1301639

    Hi Guys!

    I’d love the columns to slightly enlarge when hovering with the mouse, a little visual effect only.
    It would be the four columns under the title “AKTUELLE PRODUKTE”

    Here the link:

    Thanks ahead!

    #1301778

    Hey mirotck,
    Thank you for the link to your site, but it looks like you have already found the solution with this css:

    .flex_column.av_one_fourth:hover {
        animation: grow 2s;
        animation-fill-mode: forwards;
        position: relative;
        z-index: 50;
    }
    
    @keyframes grow {
        to {
            transform: scale(1.2)
        }
    }

    it seems to work well, but on mouse out the animation is very quick or abrupt.
    You could add this for the mouse out animation, but it is also triggered on page load, if you are looking:

    .flex_column.av_one_fourth:not(:hover) {
    	animation: growout 2s;
    	animation-fill-mode: forwards;
    }
    @keyframes growout {
      from {transform: scale(1.2)}
      to {transform: scale(1)}
    }

    I also recommend adding a custom class to these elements, otherwise all of your one_fourth columns sitewide will show this animation.

    Best regards,
    Mike

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.