Menu
I'm building a quick bullshit website for a friend, and I can't figure this problem out.
Link: http://designbyhawk.com/LOSO/
Mousing over the central image will rotate it 180deg. I want it to look like the ribbon is rotating out from under the american flag. However, as soon as the animation starts, the ribbon appears over the flag.
I'm using the z-index property to keep the ribbon under the flag, and I'm not sure how to achieve my desired effect.
Thanks everyone, and please let me know of any bad practices in the code.
html:
<!DOCTYPE HTML>
<html>
<head>
<title>LOSO 2012</title>
<link href="style.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
<div id="stripes">
<div id="gradient-top"></div>
<div id="doughnut">
<div id="LOSO">
<img src="LOSO-BANNER.png" alt="Loso 2012">
</div>
</div>
<div id="footer">
<p>© Julien Mothafreakin Cohen 2012</p>
</div>
</div>
</body>
</html>
css:
/*--------------------------
RESET
---------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{margin:0; padding:0}
article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section{display:block}
table{border-collapse:collapse; border-spacing:0}
fieldset, img{border:0}
address, caption, cite, dfn, th, var{font-style:normal; font-weight:normal}
caption, th{text-align:left}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
q:before, q:after{content:''}
abbr, acronym{border:0}
/*-----------------------*/
#stripes{
background: url('flag-stripes.jpg') repeat;
width: 100%;
height:1000px;
z-index:5;
}
#gradient-top{
width: 100%;
height: 400px;
background: url('gradient-bg.jpg') repeat-x;
}
/*-----bgs done----*/
#doughnut { /*--- Full credit for this CSS to Seth from stackoverflow: http://stackoverflow.com/users/605698/seth ---*/
border: 50px solid #FFFFFF;
border-radius: 200px;
border-style:ridge;
height:200px;
width:200px;
margin: 0 auto;
position: relative;
bottom: 160px;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
}
#doughnut:hover{
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
}
#LOSO{
background:url('LOSO.png');
width:223px;
height:264px;
position:relative;
bottom:64px;
left:-4px
}
img{
position: relative;
right: 364px;
top: 175px;
z-index: -100 !important;
}
#footer{
width:100%;
height:60px;
background: #222;
opacity:.9;
position:relative;
top:240px;
z-index:10;
padding: 10px 0 0 10px;
color: white;
font-size:15px;
}
290
Instead of animating all properties, just animate the transformation:
-webkit-transition: -wekbit-transform 2s ease-in-out;
-moz-transition: -moz-transform 2s ease-in-out;
-o-transition: -o-transform 2s ease-in-out;
-ms-transition: -ms-transform all 2s ease-in-out;
transition: transform all 2s ease-in-out;
The only other tip I can give you is to not use negative z-indexes, as they are finicky in Mobile Safari. Also, add the generic transition declaration for when browsers drop vendor prefixes.
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
