0

I'm learning Drupal and I'm trying to create a field where I can upload 2 images and let one face into the other while I mouse over/ hover / rollover it. Then I eventually plan to make it into a views like one in Zappos where the user can see alternate views on mouse over.

I've looked up the other thread and found the Rollover filter on Drupal but I still don't know how to make that work. I need it as a field of a node so that I can display a view of all the related nodes.

2 Answers 2

1

I would set it up as a single image field with two values and then use https://drupal.org/project/custom_formatters to create a custom formator for that field and do a display hide/show with css or jquery.

3
  • Thanks! The module looks promising but I'm not sure how to do a display hide/show with my imagefield. I've found examples here css3.bradshawenterprises.com/cfimg/#cfimg1 but I'm still not sure how to do it since the formatter uses PHP and html+tokens
    – ashash
    Feb 20, 2014 at 7:21
  • In other words, how do I proceed from there?
    – ashash
    Feb 20, 2014 at 15:37
  • If your images are always going to be the same size, says 100x100, you could have a parent wrapper div and then a child div containing both images. Then use position absolute to move the child div within the parent div. Something like this: <div class="wrapper" > <div class="child" > <img ... /><img ...> </div></div> then in css .wrapper { width:100px; height:100px; position:relative; overflow:hidden; } .child { position:absolute; top:0; right:0;} .child:hover { right:100px; }
    – jphelan
    Feb 24, 2014 at 22:43
0

Got it to work! I added CSS code found here into the global.css of my theme:

http://css3.bradshawenterprises.com/cfimg/#cfimg7

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

And later I used the Custom Formatter module as recommended by jpelan to add this html code from that same website.

<div id="cf">
  <img class="bottom" src="/images/Windows%20Logo.jpg" />
  <img class="top" src="/images/Turtle.jpg" />
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.