luke214 Posted October 24, 2016 Share Posted October 24, 2016 (edited) I have this code. #textnav2:hover { -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); -webkit-transition: transform .5s ease-in; -moz-transition:transform .5s ease-in; -ms-transition:transform .5s ease-in; } When i hover over the text, it works fine. It gradually gets bigger over the .5 seconds. However, there's a video next to it that turns white during the transition for some reason, and they're not linked at all. When i remove this bit; -webkit-transition: transform .5s ease-in; -moz-transition:transform .5s ease-in; -ms-transition:transform .5s ease-in; The text just gets big straight away without a transition, which is obvious. However, when removing that bit, the video doesn't turn white anymore. Any idea why this could be happening? Edited October 24, 2016 by luke214 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 24, 2016 Share Posted October 24, 2016 We are going to need more than this, to identify the problem. Link to comment Share on other sites More sharing options...
luke214 Posted October 24, 2016 Author Share Posted October 24, 2016 (edited) I'll give you the whole css then Just a note i removed the transition as that's the only way i could get the video to stop turning white. If you'd like the HTML as well let me know! a:visited { color: green; } a:hover { color: red; } * { font-family: Arial Black; } body { background: #526F35; } #wrapper{ position: absolute; background: white; box-shadow: 0 0 50px 10px black; text-align: center; border: 5px solid black; width: 50%;; padding: 8px; margin: 10px } #firstfont{ font-size: 17px; } #wrappertwo{ background: white; position: absolute; box-shadow: 0 0 50px 10px black; border: 5px solid black; padding: 8px; top: 70px; width: 23%; left: 1100px; font-size: 22px; text-align: center; } #Geodevideo{ position: absolute; box-shadow: 0 0 50px 10px black; border: 5px solid black; left: 1100px; top: 500px; width: 23.9%; } header{ font-size: 22px; } #wrappernav{ position: absolute; font-size: 30px; right: 0; top: 110px; text-align: center; background: #00CC33; border: 3px solid black; border-right: none; padding: 20px; font-weight: bold; } #textnav:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } #textnav1:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } #textnav2:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } #textnav3:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } Edited October 24, 2016 by luke214 Link to comment Share on other sites More sharing options...
luke214 Posted October 24, 2016 Author Share Posted October 24, 2016 (edited) Here's my HTML file as well in case it helps! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="My website about Minerals and Rocks" name="description"> <meta content="minerals,rocks,earth,gems" name="keywords"> <meta content="index,follow/" name="robots"> <link href="styles.css" rel="stylesheet" type="text/css"> <link href="geode.ico" rel="icon"> <title>Information about Minerals and Rocks</title> </head> <body> <div id="wrappernav"> <nav id="navmenu"> <div id="textnav">Rocks</div><br><br><br><br> <div id="textnav1">Minerals</div><br><br><br><br> <div id="textnav2">Locations</div><br><br><br><br> <div id="textnav3">Identification</div> </nav> </div> <div id="wrapper"> <noscript>Please enable Javascript</noscript> <header> <h1><ins>Welcome!</ins></h1> <p>Welcome to my website about Minerals and Rocks!<br> Hopefully you'll find 0some useful information to help you!</p> </header> <main id="content"> <article id="firstfont"> <h2>What is a Mineral</h2> <p>A mineral is a naturally occurring chemical compound. Most often, they are crystalline and abiogenic in origin.<br> A mineral is different from a rock, which can be an aggregate of minerals or non-minerals and does not have one<br> specific chemical composition, as a mineral does. The exact definition of a mineral is under debate, especially<br> with respect to the requirement that a valid species be abiogenic, and to a lesser extent with regard to it<br> having an ordered atomic structure. More information can be found <a href= "https://en.wikipedia.org/wiki/Mineral" target="_blank">here</a>!</p> <h2>What is a Rock?</h2> <p>In geology, rock or stone is a naturally occurring solid<br> aggregate of one or more minerals or mineraloids. For example,<br> the common rock granite is a combination of the quartz, feldspar<br> and biotite minerals. The Earth's outer solid layer, the lithosphere,<br> is made of rock.<br> Rocks have been used by mankind throughout history. From the Stone Age,<br> rocks have been used for tools. The minerals and metals found in rocks<br> have been essential to human civilization.<br> Three major groups of rocks are defined: igneous, sedimentary,<br> and metamorphic. The scientific study of rocks is called petrology,<br> which is an essential component of geology.<br> More information about rocks can be found <a href="https://en.wikipedia.org/wiki/Rock_(geology)" target="_blank">here!</a> </article> </main> </div> <div id="wrappertwo"> <h1><ins>Examples of Geodes</ins></h1> <p>Below is a short video showing different types of Geodes.<br> Take a look to see the different types you can find, or hopefully buy!</p> </div> <video controls="controls" id="Geodevideo" poster= "picofrock.png"><source src="Geodes.mp4" type="video/mp4"> Your browser does not support the video tag.</video> </body> </html> P.S. I just found out that the video only remains white for the DURATION of the transition, after the transition has finished it turns back to normal. And this is only happening in Chrome, just tried it on Firefox and it works fine No idea why :/ Edited October 24, 2016 by luke214 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 24, 2016 Share Posted October 24, 2016 Well I tried it and it doesn't do that? what browser are you using? You do realise using positioning especially with absolute is the worse impractical, problematic option for website layout. Link to comment Share on other sites More sharing options...
luke214 Posted October 24, 2016 Author Share Posted October 24, 2016 (edited) I'm just using Google Chrome and it flickers if i add a transition to the textnav tag. I tried it in both IE and Firefox and there isn't an issue, but the video turns white only in Chrome. I'm pretty new, I just used it because it let me position stuff easier What would be the best alternative? Here's the proper css code that makes it flicker when you hover over the text on the right called "Rocks"; a:visited { color: green; } a:hover { color: red; } * { font-family: "Arial Black"; } body { background: #526F35; } #wrapper{ position: absolute; background: white; box-shadow: 0 0 50px 10px black; text-align: center; border: 5px solid black; width: 50%;; padding: 8px; margin: 10px; font-size: 17px; } #wrappertwo{ background: white; position: absolute; box-shadow: 0 0 50px 10px black; border: 5px solid black; padding: 8px; top: 70px; width: 23%; left: 1100px; font-size: 22px; text-align: center; } #Geodevideo{ position: absolute; box-shadow: 0 0 50px 10px black; border: 5px solid black; left: 1100px; top: 500px; width: 24%; } header{ font-size: 22px; } #wrappernav{ position: absolute; font-size: 30px; right: 0; top: 110px; text-align: center; background: #00CC33; border: 3px solid black; border-right: none; padding: 20px; font-weight: bold; } #textnav:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); transition: .5s ease-in; } #textnav1:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } #textnav2:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } #textnav3:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } Edited October 24, 2016 by luke214 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 24, 2016 Share Posted October 24, 2016 It doesn't flicker as such, but nudges to right and back again? it could be the scaling increase along with padding is affect total width, and the 24% width adjusts accordingly. You would only use position: absolute for placing one element over another. It is taking out of the flow from other non positioned elements, its area is not detectable so elements will move into the space it would have occupied. Resize the browser the smaller height and width, and see what happens. Link to comment Share on other sites More sharing options...
luke214 Posted October 24, 2016 Author Share Posted October 24, 2016 Mine just turns completely white I'll add a picture attachment so you can see what i mean. You can't see it in the pic, but my mouse is over the Rocks word on the right. When it's finished transition I can see the poster image again on the video. Ahh i see what you mean. Resizing the page messes everything up What position would you recommend so that doesn't happen? Thanks for all the help by the way P.s. I've been researching and a few other people have had this problem and stated that adding this piece of code solves it, but it removes the poster image from my video which I don't want it to do. -webkit-backface-visibility: hidden; Link to comment Share on other sites More sharing options...
luke214 Posted October 24, 2016 Author Share Posted October 24, 2016 I FOUND THE SOLUTION! When I moved the video element in my HTML file ABOVE the nav section, so it happened before the textnav element it works! No idea why, some clarification would be good but I'm just happy it's working Guess my final question is which position i should use so the elements work best on different browsers and sizes when people zoom in and out! Link to comment Share on other sites More sharing options...
dsonesuk Posted October 24, 2016 Share Posted October 24, 2016 You should only use positioning, when you cannot achieve the same result using, float, margins, padding, display: inline-block;. You use media queries to adjust from 3 to 1 columns depending device/browser width Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now