Search the Community

I've just been playing with CSS media queries and transitions, to apply different layouts to different screen sizes, and I came across an unexpected effect when testing in Internet Explorer 11 and Google Chrome. Firefox doesn't seem to be affected, and reacts in the way I would expect. In this example there are three div elements, one of which is a container. Here is the HTML. <div id="container"> <div id="heading">HEADING</div> <div id="links"> <ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> <li>Link 5</li> </ul> </div></div> I applied a CSS transition that would resize the height of both div elements, as well as the font within them; all in just 0.5s. Here's the CSS. /* Below is the default styles */html, body, div, img, p, span, header, nav, ul { margin: 0 auto; border: 0; padding: 0; font-size: 1em; position: relative; -webkit-transition: height 0.5s ease, font 0.5s ease; transition: height 0.5s ease, font 0.5s ease; } ul { list-style-type: none; }li { display: inline; }#container { } #heading { width: 100%; height: 200px; background-color: red; font-family: "segoe ui light"; font-size: 50px; color: white; }#links { width: 100%; height: 50px; background-color: blue; font-family: "segoe ui light"; font-size: 30px; color: white; }/* Below is the styles applied to medium sized displays (tablets etc.) */@media screen and (min-width: 701px) and (max-width: 900px) { #heading { height: 100px; font-size: 40px; }#links { height: 40px; font-size: 20px;} }/* Below is the styles applied to small displays (mobile phones etc.) */@media screen and (max-width: 700px) {#heading { height: 50px; font-size: 30px; } #links { height: 30px; font-size: 15px; }} The height of both div elements are applied simultaneously, with the transition completing in 0.5s. However, the amendment to the size of the font doesn't apply simultaneously and, in fact, were amended almost as if they were triggered separately at different times. That is, the first div was affected by the change, which took 0.5s. Then, the second div was affected by the change, which took an additional 0.5s. So, the font transition took a total of 1s to complete. But, by definition, I would have expected the transition to be applied to both div elements at the same time and to complete within 0.5s just like the height. Is anyone aware of any reason why the font transition may be interpreted differently to the height transition?

Hi all - My end goal is a static image that, when hovered, will darken slightly and white text will slide up and fade in from the bottom of the frame. But I'm not sure of two things: first, how do I have a single div container/hover "area" trigger both animations, rather than just the top-most one? Second, as the animation stands now, it only triggers when I hover over the image - which has been positioned out of frame so as to make the fade/slide-in animation look right. How can I specify the affected hover area so that it triggers an image to arrive from out of frame? Since I suspect that was really unclear, here's what I've got so far. #backgroundimg img { /* static image background*/position: absolute;top: 0;left: 0;z-index: 2;} #anisquare { /* dark square that fades in on hover; width and height are same dimensions as my background image */width:293px;height:272px;position: absolute;top:0;left:0;z-index: 3;background:black;opacity:0;transition:opacity .3s;-moz-transition:opacity .3s; /* Firefox 4 */-webkit-transition:opacity .3s; /* Safari and Chrome */-o-transition:opacity .3s; /* Opera */} #anisquare:hover{opacity: 0.38;} #fadingtext { /* here's where my confusion starts... */position:absolute;top: 0;left: 0;width: 293px;height: 272px;} #fadingtext img {position:absolute;top: 280px;left: -1px;width: 191px;height: 45px;z-index:4;opacity:0;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;} #fadingtext:hover { opacity: 1; top: 228px;left: -1px;} As it stands, the image only rolls up and appears when I mouse over the image. I would like it to animate when I mouse over the area specified by the #fadingtext div tag. Also, at the moment, both hover animations are mutually exclusive - eventually I want hovering over a single div container to activate both of them. Many, many thanks in advance!!

Hello! I'm new here and I am dealing with a little problem which I hope you guys can help me with! What I want to achieve: Basically what I want to happen is that when the logo gets hovered the black message box will fade in using css transitions. Take a look at the image below and you will get me. And when the mouse moves away from the logo the message box fades out to zero again. But something is wrong, I dont know what. https://docs.google.com/file/d/0B0ONzhkyFUwhQXNOTFJzb0lVSFE/edit?pli=1 <-- image to make you understand. What I am dealing with: Thanks for staying with me, here is my HTML, CSS AND jQuery HTML: <div id="colume"> <div id="logo-to-hover"><a href="#"><img src="images/villave-logo.png" alt="villave-logo" width="220" height="53" /></a> </div> <!-- end logo-to-hover--> </div> <!-- end colume--> <div id="message"> <div id="box-1" class><p>Byggvareforhandler</p> </div> <!-- end box1 --> </div><!-- end message--> jQuery: <script>$(function() { $( "#logo-to-hover" ).hover(function() { $( "#box-1" ).toggleClass( "box-a"); return false; });}); </script> CSS: #logo-to-hover { width: 220px; height: 55px; margin-right: 20px; float: left; } #boxes { width: 940px; height: 71px; margin-left: auto; margin-right: auto; position: absolute; } #box-1 { height: 44px; width: 200px; margin-left: 10px; margin-right: 10px; background-image: url(../images/hoverbg.png); float: left; text-align: center; opacity: 0; -webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; }.box-a { opacity: 1; -webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; }