7 Replies Latest reply: Apr 1, 2013 5:59 AM by David_Powers RSS

    Urgent: Fading an element in a fluid layout

    tedbrugen

      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/lightbox/

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

       

      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!

        • 1. Re: Urgent: Fading an element in a fluid layout
          David_Powers CommunityMVP

          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;

          }

          • 2. Re: Urgent: Fading an element in a fluid layout
            tedbrugen Community Member

            David,

             

            Thanks for your help. The mouse over is working perfectly now, but h2 is still giving me trouble. It seems that "top" and "width" are controlling the placement of the heading within the fluid div (when I change width to 60% it moves the word "milling" to the left some). What could be causing this and is there a workaround? To be clear, the "span" element is essentially playing the role of the transparent black box, and padding is what I'm using to beef it up so it fills more space. Problem is, padding is based on the amount of text in the heading. I want a transparent box behind the text, with about a 30px margin on all sides within the image. Span or no span I need this to work.

             

            Thank you!

            • 3. Re: Urgent: Fading an element in a fluid layout
              David_Powers CommunityMVP

              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%;

              }

              • 4. Re: Urgent: Fading an element in a fluid layout
                tedbrugen Community Member

                David,

                 

                Once again, thanks for your help. Using this method everything stayed the same. The position of the heading didn't seem to change, and the padding is still what controls the size of the black background. I need the black background to fill the image, sans about 30 pixels as a margin around each edge. I'm not sure if span is even the best thing to use here, it's just the only way I knew to do it.

                • 5. Re: Urgent: Fading an element in a fluid layout
                  David_Powers CommunityMVP

                  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.

                  • 6. Re: Urgent: Fading an element in a fluid layout
                    tedbrugen Community Member

                    David,

                     

                    This worked exactly as I imagined. I literally can't thank you enough for your help.

                    • 7. Re: Urgent: Fading an element in a fluid layout
                      David_Powers CommunityMVP

                      Glad to have been of help.