0

Current example: DELETED LINK

An h2 overlays the foot of an image and is permanently visible. When the cursor hovers over the image the span text beneath the h2 moves over the image and pushes the h2 up with it. That currently works, but I'm having trouble figuring out how to add an ease transition as the extra text comes into view on hover. The h2 and span are both contained in div.img_txt so maybe that's the key?

I can get the transition on the text to work but it doesn't push the h2 up. The main problem seems to be it won't be a fixed height that I want the text to move up, as it could be anything between 1 to 4 lines. The h2 could also go over 1 or more lines.

This is the code that works without any transition effect:

HTML

<div class="rimg1">
  <a href=""><div class="img_txt"><h2>Apples the most attractive fruit</h2><span>Apples pip other fruits as most appeeling for core values</span></div><img src="graphics/apple-tree.jpg" width="304" height="220" alt=""></a>
</div>

CSS

div.rimg1{
  float: left;
  width: 284px;
  height: 220px;
  position: relative;
}

div.rimg1 span{
  color: #fff; 
  font-size: 0.9em; 
  position: absolute; 
  visibility: hidden; 
  transition: all 0.6s ease;
  /* cross-browser transition CSS removed for ease of viewing */
}

div.rimg1:hover span{
  position: relative; 
  bottom: 0; 
  visibility: visible;
}

div.img_txt{
  width: 284px; 
  background: rgba(51,51,51,0.80); 
  padding: 5px 10px 5px 10px; 
  position: absolute; 
  bottom: 0; 
  z-index: 9; 
  overflow: hidden;
}

The various positioning attributes above are for the layout of the overall page, which has a number of images at different sizes.

In the current code the only change that would be effective with the transition is the visibility, as I don't think a change from absolute to relative positioning would have an effect if there's no distance value added?

Thanks for any help. :)

Alex Harford
  • 110
  • 7
  • 1
    in order to see transition working you need to use rule where values are numbers, so it calculates steps. visible/hidden just jumps from a valu to the other, there's no possible ways to say:visible/hidden 50%, unless you use opacity:0 & 1;. – G-Cyrillus Jun 24 '13 at 15:39
  • 1
    Yes, so either animate the opacity or the height from 0px to auto - then your element will fade/resize accordingly. – casraf Jun 24 '13 at 15:41
  • @Chen Thanks both - I knew numbers were needed, I just didn't explain it very well. height:auto didn't work on it's own, but I added a min and max-height as per this solution: http://stackoverflow.com/a/5611482/1951960 – Alex Harford Jun 25 '13 at 08:19

0 Answers0