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

“I worked with Hilary for a time and during that period I found her to be extremely helpful and articulate. Her work was of highest standard and I was also able to observe how she interacted with her clients. While providing a top class service she maintained friendly and helpful services with them, listened to what they wanted and made appropriate suggestions. Hilary also assisted me with my work and provides services to the local community at large. I have no hesitation in recommending Hilary for any work.”

Andrea Harte - Undergraduate at University of Limerick