title: Tumblr photosets, image on image
body: <p>I'm working on a tumblr theme for a magazine I am working on, but I'm stuck with the photosets blocks.</p>
  
  <p>I'd like to have two image layered with a hover function to make the first one disappear when you put your mouse. </p>
  
  <p>I think my css is quite good for that but the problem is that for photosets tumblr create an external page with its own css and I don't know how to modify it. I just can get opacity effect using iframe.photoset but it's not enough to modify the place of my image. </p>
  
  <p>This is the css I apply to the photoset:</p>
  
  <pre><code>.photoset {
      position: absolute;
      top: 0;
      left: 0;
      display: none;
  }
  
  
  .photoset_row {
      position: relative;
      display: block;
      width: 500px;
  }
  
      .photoset_row:first-child {
          display: block;
      }
  
  .photoset:hover .photoset_row {
      display: block;
  }
  
  .html_photoset:hover .photoset_row:fisrt-child {
      display: none;
  }
  </code></pre>
  
  <p>I was thinking to use maybe JS like that (test with a shake effect) but I'm not a web designer and that look too hard for me.</p>
  
  <pre><code>{block:Photoset}
  &lt;div class="photoset"&gt;
      &lt;div class="shakeImage" onMouseover="init(this);rattleimage()"  onClick="top.focus()"/&gt;
  {Photoset-500}
  &lt;/div&gt;
  </code></pre>
  
  <p>So if you have an idea for this problem that would be really great!</p>