Logo animation on site title hover

Hi there,

Would this filter help?
https://docs.generatepress.com/article/generate_logo_output/

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?

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.

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?

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.

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!

You're welcome :)