StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you want to fade out the text at the same speed as the image here are two options</p> <p><strong>Image Hover Method (<a href="http://jsfiddle.net/7dJuX/4/" rel="nofollow">jsfiddle</a>)</strong></p> <p>This method is similar to what you have in your existing code with the addition of hiding all of the copy divs via opacity at the beginning.</p> <pre><code>$(document).ready(function () { $('.copy').css("opacity", "0"); $("img.off").on({ mouseenter: function () { $(this).stop().animate({ "opacity": "0" }, "normal"); $('.copy').stop().animate({ "opacity": "1" }, "normal"); }, mouseleave: function () { $(this).stop().animate({ "opacity": "1" }, "normal"); $('.copy').stop().animate({ "opacity": "0" }, "normal"); } }); }); </code></pre> <p><strong>List Item Hover Method (<a href="http://jsfiddle.net/DRUYj/1/" rel="nofollow">jsfiddle</a>)</strong></p> <p>This method assumes you want the animation to occur when you click over the entire list item instead of just the image. This will ensure that if you happen to hover over any items placed absolutely above the image (such as the heading or the copy text), the <code>mouseleave</code> handler will not trigger.</p> <pre><code>$(document).ready(function () { $('.copy').css("opacity", "0"); $("#img_grid1").on({ mouseenter: function () { $(this).find("img.off").stop().animate({ "opacity": "0" }, "normal"); $('.copy').stop().animate({ "opacity": "1" }, "normal"); }, mouseleave: function () { $(this).find("img.off").stop().animate({ "opacity": "1" }, "normal"); $('.copy').stop().animate({ "opacity": "0" }, "normal"); } }, "li"); }); </code></pre> <p><strong>Note:</strong> In both the example, I added some additional style to the images so they would be visible without the source files.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload