StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You could do this with CSS, or with Javascript. Without knowing your markup, and how your elements are laid out, it's not possible to determine which option is best.</p> <h3>CSS Option</h3> <pre><code>a:hover span { color:red; } <a href="1.html"> <img src="1.jpg" /> <span>Title: One</span> </a> </code></pre> <p>In that example, we have our text and image both within a link. We are then modifying the color of the text on the :hover event.</p> <h3>Javascript (jQuery)</h3> <pre><code>div.hovered p { color:red; } <div class="preview"> <img src="1.jpg" /> <p>Title: One</p> </div> $("div.preview img").hover( function () { $(this).parent().addClass("hovered"); }, function () { $(this).parent().removeClass("hovered"); } ); </code></pre> <p>This example showcases a solution that simply adds a class to the parent container, which in turn modifies the representation of the title. This event is controlled by hovering the image within the container.</p> <h3>Update:</h3> <p>Positioning your text isn't that difficult. The quick-and-easy method would be to position the parent container with relative, and the text with absolute:</p> <pre><code><div class="container"> <a href="#"> <img src="1.jpg" /> <span class="title">Hello World</span> </a> </div> div.container { position:relative; width:150px; } div.container span.title { position:absolute; top:0; left:50px; width:100px; } </code></pre> <p>That's a quick example. You can modify the values to your needs.</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