CSS multiple states for elements with button triggers

2 Views

I am creating a website and am trying to make the website zoom into different elements of the background image when a button is clicked.
I was able to get it to zoom into a singular point using :hover although was unable to find a way to have HTML buttons trigger multiple custom states like :hover, :active & :focus in style.css

here is my code:

Read More
<a href="#" onclick="style.site='state1';">1</a>
<a href="#" onclick="style.site='state2';">2</a>
<a href="#" onclick="style.site='state3';">3</a>

            .site {
                background-image: url(images/Background.jpg);
                background-size: 100%;
                max-width: auto;
                position: relative;
                transition-property:all;
                transition-duration:5s;
            }
            .site:State1{
                transform-origin: 80%  50%;
                transform: scale(10);
                animation-timing-function: ease-in;
            }
            .site:State2{
                transform-origin: 20%  50%;
                transform: scale(10);
                animation-timing-function: ease-in;
            }
            .site:State3{
                transform-origin: 50%  60%;
                transform: scale(10);
                animation-timing-function: ease-in;
            }

Is it possible to do it this way? or have something similar?

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. You could do it with a simple function:

    HTML:

    <a href="#" onclick="switchState();">Text</a>

    Javascript: 

    function switchState() {
    var elements = document.getElementsByClassName("site");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.transform = "scale(10)";
        elements[i].style.transformOrigin = "50% 60%";     
        elements[i].style.animationTimingFunction = "ease-in";   
}

    Or if you’re using jQuery:

    function switchState() {
        $(".site").css({
            "transform-origin": "50% 60%",
            "transform": "scale(10)",
            "animation-timing-function": "ease-in",
        });       
    }

    If you pass the css properties as parameters, you don’t need them to be hardcoded.