Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing jQuery, load divs with opacity of .5
    primarykey
    data
    text
    <p>I have several images on a page that have captions that overlay the bottom 50px of the image. When they load, they begin at opacity of 1, but I want them start as .5. The reason is that there's a <code>hover</code> event that animates the opacity to 1 on hover, so I want them to start on .5.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('.fade').hover(function() { $(this).stop().animate({"opacity": 1}); },function() { $(this).stop().animate({"opacity": .5}); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="image_w_caption" style="float:left;margin:5px;"&gt; &lt;div class="image" style="width:250px;height:188px;background:url(images/image.jpg) no-repeat 0 0;"&gt; &lt;/div&gt; &lt;div class="fade" style="width:250px;height:188px;background:url(images/image_2.png) no-repeat 0 0;position:relative;top:-203;z-index:2;"&gt; &lt;p style="padding:150px 5px 0 5px;z-index:3;color:white;"&gt;text&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="image_w_caption" style="float:left;margin:5px;"&gt; &lt;div class="image" style="width:250px;height:188px;background:url(images/image_2.jpg) no-repeat 0 0;"&gt; &lt;/div&gt; &lt;div class="fade" style="width:250px;height:188px;background:url(images/image_2.png) no-repeat 0 0;position:relative;top:-203;z-index:2;"&gt; &lt;p style="padding:150px 5px 0 5px;z-index:3;color:white;"&gt;more text&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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