[Resolved] Logo animation on site title hover

Home Forums Support [Resolved] Logo animation on site title hover

Home Forums Support Logo animation on site title hover

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1197871
    George

    I want to create a slide animation to animate the logo when hovering over the site title. I have created the animation but I can’t target the logo to animate once the site title is being hovered. I think it’s because this can only happen if the site title is after the logo on the HTML markup. Is there a way to change the markup order somehow, maybe through Flexbox CSS?

    #1197874
    Leo
    Staff
    Customer Support
    #1197886
    George

    Hmmm. I don’t know, I don’t think so since this is for the logo output only.

    Let me try and explain more. The theme generates the following code for logo and site title:

    <div class="site-branding-container">
    	<div class="site-logo">
    		<a href="http://mysite.com/" title="site name" rel="home">
    			<img class="header-image" alt="interface" src="http://mysite.com/wp-content/uploads/2020/02/back.svg" title="site name">
    		</a>
    	</div>
    	<div class="site-branding">
    		<p class="main-title" itemprop="headline">
    			<a href="http://mysite.com/" rel="home">site name
    			</a>
    		</p>			
    	</div>
    </div>

    and I am using the following CSS:

    .site-logo:hover + .site-branding p { transform: translateX(20px);}
    
    .site-branding p {
    	transition: all 0.2s ease-out;
    }

    The logo is on the left of the site title and on the HTML markup the logo precedes the site title so I can only target the logo on hover and apply the animation to the site title. What I want to do is target the site title on hover so that the logo animates. If I was to change the markup order in any way, the site title would be on the left side and the logo just next to it on the right and wouldn’t look as intended.

    That’s why I was wondering if there was a way to “trick” the browser that the site logo comes second semantically but not in reality, if you know what I mean. Unless there is an easier way?

    #1198223
    David
    Staff
    Customer Support

    Hi there,

    Can you uncheck Place logo next to title the Site Title will now be before your logo and .site-branding + .site-logo will now apply.

    As the + adjacent sibling combinator only applies to the actual HTML DOM order. You can use CSS to re-order them and it will still apply.

    #1198662
    George

    Hi David.

    I want to have Place logo next to title checked because I need the logo next to the title as it is. If I uncheck it, what’s the best way to reorder them?

    #1198936
    Tom
    Lead Developer
    Lead Developer

    You might be able to re-order them using flexbox/order, but it may not be ideal.

    Maybe you could target the hover of an element higher up in the DOM? Otherwise, javascript might be worth trying.

    #1198972
    George

    Maybe you could target the hover of an element higher up in the DOM?

    Excellent idea! I targeted the .site-branding-container class. Works great!

    .site-branding-container:hover > .site-logo { 
    	transform: translateX(14px);
    }
    
    .site-logo {
    	transition: all 0.2s ease-out;
    }

    Thanks again, Tom!

    #1199711
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.