Read more about web design Cork and drop us a message!

Cool responsive image hover effect no js

So the first thing is, and the generally accepted best practice, is to use a real image for your logo if you are using a graphical one. There are differing opinions on whether it’s best to wrap that with a h1 tag or just to leave it as an image, and insert a real text h1 elsewhere on the page using heading tags as heading tags without any css trickery.. for this method I’m wrapping a h1 tag around a real image, but you can equally just use the image alone.

HTML5 code (including Textpattern tags)

<h1 class="logo"> <a href="<txp:site_url />"> <img src="<txp:site_url />images/logo.png" alt="<txp:site_name />"/> <img src="<txp:site_url />images/logo_hover.png" alt="" class="onhover"/> </a> </h1>

I did leave the second images alt tag empty not to output two headings for disabled users, this doesn’t cause any validation error via w3c. I’ll admit I was surprised that didn’t kick up an error but hey, I won’t complain!

CSS stylesheet code

h1.logo{ float: left; /* only floating left to allow right hand nav - safely change */ text-decoration: none; z-index:1; padding: 0; margin: 0px; position: relative; }

h1.logo a img{ padding: 0; border: 0; margin: 0.8em 0 0 0; position: relative; top: 0; left: 0; transition: all 1.5s .5s; }

h1.logo a img.onhover{ opacity: 0; position: absolute; }

h1:hover a img.onhover{ opacity: 1; }

Media queries – CSS stylesheet code

My breakpoint isn’t based on the screen resolution of the device but rather the size at which my layout breaks, a nice way of thinking about responsive design. Because we used a real image for the logo output, making it responsive is so simple.

@media screen and (max-width: 610px){
h1.logo img { max-width: 100%; height: auto; }
}

Back to Top

Random Web Design Testimonials

Hilary at her Company Proximo Design created a webpage for me at Gourmet Burger Bistro this year. I wanted to get it up and running quickly and I could not have been more satisfied with the speed and quality of her results.
Best of luck in the future Hilary and I look forward to continuing our business relationship.
Michael Condon
Gourmet Burger Bistro

Michael Condon Owner, Gourmet Burger Bistro