Skip navigation
tedbrugen
Currently Being Moderated

Urgent: Fading an element in a fluid layout

Mar 29, 2013 8:09 AM

Tags: #dreamweaver #fluid_grid_layout

This is a very time-sensitive project, so I would be extremely appreciative for feedback.

 

I have two fluid divs containing images that serve as links to corresponding pages. When you hover on the images, a description fades in along with a transparent background (controlled by padding).

 

Here are two pictures illustrating the effect:

http://www.flickr.com/photos/49959232@N07/8599658143/in/photostream/li ghtbox/

http://www.flickr.com/photos/49959232@N07/8600758538/in/photostream/li ghtbox/

 

HTML:

 

<div id="Image1" class="image1">     (This is the fluid div)

  <a href="#">

    <img src="_images/services/Milling.jpg">

   <h2><span>Milling</span></h2>

    </a>

            </div>    (Closing tag for fluid div)

 

CSS:

 

.image1 {

          position: relative;

    width: 100%; /* for IE 6 */

          text-align:center;

          margin-top:50px;

}

 

/*

CROSSFADE

*/


h2 {

   position: absolute;

   top: 40%;

   width: 100%;

}

 

 

span {

          color: white;

          font-size: 1.25em;

          letter-spacing: .15em;

          background: rgb(0, 0, 0); /* fallback color */

          background: rgba(0, 0, 0, 0.7);

          padding: 80px;

          -webkit-transition: opacity .5s ease-in-out;

          -moz-transition: opacity .5s ease-in-out;

          -o-transition: opacity .5s ease-in-out;

          transition: opacity .5s ease-in-out;

          opacity: 0;

          font-family: "Vollkorn Regular", serif;

}

h2 :hover {

  opacity:1;

}

 

 

Problems:

1) I need to make the transparent box fill a percentage of the fluid div, because it is currently sized based on the amount of text within it.

2) I need to cause the transparent box and text to fade in when the fluid div is hovered over, currently it only fades when you hover over the transparent box itself.

 

I do not want to fade between two images with javascript or html5, because CSS lets me drop the heading down below the image when on mobile devices (where hover won't work). I also want to use as much text as possible for SEO. I do not have a test site available yet.

 

Thank you!

 
Replies
  • Currently Being Moderated
    Mar 29, 2013 8:44 AM   in reply to tedbrugen

    The h2 element is nested inside the image1 div, so you can make the width a percentage of its parent.

     

    h2 {

       position: absolute;

       top: 40%;

       width: 60%;

    }

     

    You might need to fix the padding in the span to account for this change.

     

    To get the effect to change when you mouse over the image:

     

    .image1:hover span {

        opacity: 1;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 29, 2013 9:19 AM   in reply to tedbrugen

    Make the width of the heading 50%. Give it a left margin of minus 25%, and set its left offset to 50%.

     

    h2 {

       position: absolute;

       width: 50%;

       margin-left: -25%;

       top: 40%;

       left: 50%;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 29, 2013 12:42 PM   in reply to tedbrugen

    Sorry about not replying earlier. I went out for a while.

     

    I don't have your images or layout to work with, but I've test this locally with a fluid image, and it worked the way I think you want (no span required):

     

    .image1 h2 {

        position: absolute;

        text-align: center;

        background-color: #000;

        background: rgba(0,0,0,0.7);

        color: #FFFFFF;

        padding: 20%;

        width: 50%;

        margin: 0 0 0 -45%;

        left: 50%;

        top: 15%;

        opacity: 0;

         -webkit-transition: opacity .5s ease-in-out;

         -moz-transition: opacity .5s ease-in-out;

         -o-transition: opacity .5s ease-in-out;

         transition: opacity .5s ease-in-out;

    }

     

    I've used percentage values for padding, left margin, and the absolute positioning offsets. The problem with using percentage values for padding is that both horizontal and vertical padding are calculated based on the width of the containing element. In other words, the top and bottom padding are 20% of the image's width, not 20% of its height. That's why the top offset is 15% rather than 10%.

     

    It works well in my test file, but you might need to juggle with the values for padding and top offset.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 1, 2013 5:59 AM   in reply to tedbrugen

    Glad to have been of help.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points