Hi, If you hover over the images at http://quinnmoore.com you will notice that there is a slight delay as if it is stuttering. How can I get rid of this stutter effect and see it hover over more smoothly? Thanks in advance.
I was able to solve the problem using relative positioning on the parent and absolute positioning on the child (the img tag).
Some advice: In terms of those hovers, don't waste JavaScript on doing CSS' job. you aren't doing ANYTHING there that even warrants the PRESENCE of javascript when CSS has a perfectly good :hover attribute. I'd also consider making those anchors even if the href is self referring so keyboard navigators aren't left out in the cold. Second, if there's JUST the image, with no "figCaption", and it's not a mathematical, scientific or engineering figure, <figure> is probably a pointless semantically incorrect tag. Third, it's probably a BAD idea to be putting a title attribute on something that's identical to the ALT text. For graceful degradation purposes I'd put that in as actual text in it's own element (like P) AFTER the image. That way you have a hook for li:hover. Of course with six stylesheets doing the job of one, no media targets on those link, a slew of scripting on a site that shouldn't even need any, HTML 5 bloat / pointless elements, no document structure thanks to no headings, no charset declaration, no graceful degradation on the social links, presentational use of classes, DIV for nothing, etc, etc, etc... You've got a laundry list of how NOT to build a website. Not surprising and probably not your fault -- there's a LOT of bad advice and worse practices out there. I'm heading to bed right now, but I'll try to revisit this tomorrow and do a quick rewrite since your page is REALLY simple, just to show you what I mean... generally speaking for what you have that page doing, I'm HIGHLY doubtful that it would need to be significantly larger than this for markup: <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1" > <link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection,tv" > <title> Quinn Moore </title> </head><body> <ul class="hoverGallery"> <li> <a href="#"> <img src="images/1.jpg" alt="This is an older picture but we're so stupid so yep." ><span> This is an older picture but we're so stupid so yep. </span> </a> </li><li> <a href="#"> <img src="images/2.jpg" alt="with Quinn Moore and Stephen Moore." ><span> with Quinn Moore and Stephen Moore. </span> </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="with Sandy Moccaldi." ><span> with Sandy Moccaldi. </span> </a> </li><li> <a href="#"> <img src="images/4.jpg" alt="with Andrea Sittnick Moss, Stuart Graves and Quinn Moore." ><span> with Andrea Sittnick Moss, Stuart Graves and Quinn Moore. </span> </a> </li><li> <a href="#"> <img src="images/5.jpg" alt="with Walaa Adam and Quinn Moore." ><span> with Walaa Adam and Quinn Moore. </span> </a> </li><li> <a href="#"> <img src="images/6.jpg" alt="with Carrie and Stephan Moore" ><span> with Carrie and Stephan Moore </span> </a> </li><li> <a href="#"> <img src="images/7.jpg" alt="with Quinn and Mattie Moore" ><span> with Quinn and Mattie Moore </span> </a> </li><li> <a href="#"> <img src="images/8.jpg" alt="with Quinn Moore, Claudet Mitchell and Amy Sittnick Graves at Occoquan Historic District." ><span> with Quinn Moore, Claudet Mitchell and Amy Sittnick Graves at Occoquan Historic District. </span> </a> </li> </ul> <div id="footer"> <hr> <ul id="footerMenu"> <li><a href="#">About us</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="#">Press</a></li> <li><a href="#">iOS App</a></li> <li><a href="#">Android App</a></li> </ul> <ul id="footerSocial"> <li class="facebook"> <a href="https://www.facebook.com/quinn.moore.142"> FaceBook<i></i> </a> </li> <li class="twitter"> <a href="#"> Twitter<i></i> </a> </li> <li class="googlePlus"> <a href="#"> Google<i></i> </a> </li> <li class="instagram"> <a href="#"> Instagram<i></i> </a> </li> </ul> <div> © 2015 by <a href="http://www.maureenmoore.com">Maureen Moore</a> </div> <!-- #footer --></div> </body></html> Code (markup): Basically half the markup. EVERYTHING else done on that page so far can be done in modern browsers (and a lot of it in older browsers) WITHOUT resorting to JavaScript whatsoever. Letting CSS do the heavy lifting is often WAY more reliable / useful than JavaScript anyways... and usually easier to turn off for things like mobile/touch that don't even HAVE hover states.
<figure class="meal-photo"> <a href="#" class="tooltip"> <span> This is an older picture but we're so stupid so yep. </span> <img src="resources/img/facebook/1.jpg" alt="This is an older picture but we're so stupid so yep. "> </a> </figure> with this CSS; a.tooltip span { z-index:0;display:none; padding:14px 20px; margin-top:60px; margin-left:-160px; width:300px; line-height:16px; } a.tooltip:hover span{ display:block; position:absolute; top: 0px; left: center; border:2px solid #000; color:#000; background:#fff; z-index: 12; }
I created the top row with CSS animation and the bottom row with jQuery. I would like for anyone reading this post to check both rows and let me know how they were displayed. Thanks.