2 Replies Latest reply: Apr 24, 2013 11:33 AM by Rik Ramsay RSS

    Multiple CSS transitions... is it possible?

    matthew stuart Community Member

      I am looking to change the background-color and load a background-image on hover. The colour is easing nicely, but the image is just popping up instantly, but I want it to fade into visibility too. Is this possible to have more than one trasition on a page item.

       

      Also, in the CSS style, you'll notice that I am having to bump the following divs down one pixel (margin-bottom:1px;) on the hover state to allow me to show the shadow along the bottom of a div. I've tried to change the z-index to lift it above, but again, it's not working... so I am assuming my CSS is shocking!

       

      a .comingeventwrap {

                background-color: #ffffff;

                text-decoration: none;

                padding: 15px 10px 15px 0;

        border-bottom: 1px solid #ebebeb;

                -webkit-transition: background-color 400ms ease, background-color 400ms ease;

                -moz-transition: background-color 400ms ease, background-color 400ms ease;

                -o-transition: background-color 400ms ease, background-color 400ms ease;

                transition: background-color 400ms ease, background-color 400ms ease;

                z-index:10;

      }

      a:hover .comingeventwrap {

                margin-bottom:1px;

                background-color: #eeeeee;

                background-image:url(../images/bg-moreinfo.png);

                background-repeat:no-repeat;

                background-position: bottom right;

                -webkit-box-shadow:  0px 0px 1px 1px rgba(0, 0, 0, .3);

          box-shadow:  0px 0px 1px 1px rgba(0, 0, 0, .3);

                z-index:100;

      }

       

      The page with this can be seen at http://showmemaritime.com/events.php

       

      Thanks for looking.

        • 1. Re: Multiple CSS transitions... is it possible?
          Jon Fritz II CommunityMVP

          You can make cross-fade image transitions with css, but not within the background-image attribute itself. The background-image is working as expected from your description. Since there are no settings between background-image:url(../images/bg-moreinfo.png); and "no background-image attribute" you are seeing what is supposed to happen.

           

          Restructuring your page to use two overlapping divs with different images and opacity settings that change on :hover would be the way to go in my opinion.

           

          Here's a basic cross-fade I've used in the past, just swap out the images with yours and see if that's the basic effect you're looking for. You should be able to modify the css to do the rest of what you want if it is...

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml">

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

          <title>Untitled Document</title>

          <style type="text/css">

          body {

              margin:0;

          }

          #wrapper {

              width:950px;

              margin:auto;

          }

          .fade {

              width:300px;

              height:300px;

              overflow:hidden;

              margin-right:10px;

              margin-bottom:10px;

              float:left;

          }

          div.off {

              opacity:0;

              z-index:1;

              transition:all 1s;

              -moz-transition:all 1s;

              -webkit-transition:all 1s;

          }

          div.on {

              z-index:2;

              position:relative;

              top:-300px;

              opacity:1;

              transition:all 1s;

              -moz-transition:all 1s;

              -webkit-transition:all 1s;

          }

          .fade:hover div.off {

              opacity:1;

              z-index:2;

          }

          .fade:hover div.on {

              opacity:0;

              z-index:1;

          }

          </style>

          </head>

          <body>

          <div id="wrapper">

            <div class="fade">

              <div class="off"><img src="images/viewable_on_hover.jpg" alt="#" width="300" height="300" /></div>

              <div class="on"><img src="images/viewable_when_page_loads.jpg" alt="#" width="300" height="300" /></div>

            </div>

          </div>

          </body>

          </html>

           

          EDIT: With this one, you can add a link around the image in the <div class="on"> so the cross-fade can be a clickable button

          • 2. Re: Multiple CSS transitions... is it possible?
            Rik Ramsay Community Member

            It might seem like two transitions, but really it's only one - you are fading up the background image and color.

             

            Try the below and see if it helps - I have used this a few times on different items. I modified it from my code to fit yours so it might need some tweaking. In basic terms, the background color and image is on the main link with a zero opacity and you then fade it up to a full opacity. I added the 'position:relative' to the hover state to fix your shadow problem but this hasn't been tested.

            a .comingeventwrap {

                      padding: 15px 10px 15px 0;

                      border-bottom: 1px solid #ebebeb;

                      background:#FFF url(../images/bg-moreinfo.png) no-repeat bottom right;

                      opacity:0;

                       -webkit-transition: background .4s ease-in-out;

                       -o-transition: background .4s ease-in-out;

                      -moz-transition: background .4s ease-in-out;

                      -ms-transition: background .4s ease-in-out;

                      transition: background .4s ease-in-out;

            }

            a:hover .comingeventwrap {

                      opacity:1.0;

                     background:#999 url(../images/bg-moreinfo.png) no-repeat bottom right;

                      -webkit-box-shadow:  0px 0px 1px 1px rgba(0, 0, 0, .3);

                      box-shadow:  0px 0px 1px 1px rgba(0, 0, 0, .3);

                      position:relative;

            }

             

            EDIT:// Having just realised that you have a bunch of text and divs inside that <a> tag, this solution will probably not work as it will fade ALL content. As such, you could lay one div over the other and attach the above to the lower div.


            EDIT EDIT:// I modifed the above. You could invert what you have and have it done through CSS. Make the text image WHITE instead of dark and then make the backgriund overlay that little darker than you have now. The background will seem as though its fading up but really you are just making it visible.