khan1992 Posted December 11, 2013 Share Posted December 11, 2013 ive been trying to keep a div enlarged however once i stop hovering over it it reverts back to original leaving a nasty white gap which i want to plug. sort of like what they have on this website http://www.rdio.com/ where they display the albums. This is what ive managed to do <!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">.rollinfotray { height: 400px; width: 1000px; background-color: #FFF;}.infobox1 { background-color: #333; height: 400px; width: 200px; float:left; overflow:hidden;}.infobox1:hover { width: 400px; -moz-transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; background-color: #09F;}.infoboxtitle { font-family: impact; text-transform: uppercase; font-size: 36px; margin-left: 5px; width: 400px;}.infobox2 { background-color: #666; height: 400px; width: 200px; float: left;}.infobox2:hover { width: 400px; -moz-transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;background-color: #09F;}.infobox3 { background-color: #999; height: 400px; width: 200px; float: left;}.infobox3:hover { width: 400px; -moz-transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; background-color: #09F;}#container { background-color: #333; width:1000px; }.infocontent { float: left; width:199px; height:400px;}</style></head><body><div id="container"><div class="rollinfotray"><div class="infobox1"><div class="infoboxtitle">sdopksdos</div><div id="infocontent"></div><div id="infocontent">sdsids9d09isd09isdsdsdsdsdsdsdsd</div></div><div class="infobox2">jiodosijdoeS</div><div class="infobox3"></div><div class="infobox1"></div></div></div></body></html> Link to comment Share on other sites More sharing options...
Hadien Posted December 11, 2013 Share Posted December 11, 2013 they aren't using css :hover to provide that effect (or at least not exclusively), that is most likely javascript performing animations on those elements with an onmouseenter event. Link to comment Share on other sites More sharing options...
khan1992 Posted December 11, 2013 Author Share Posted December 11, 2013 can css be used to do something like that as im not very competent with javascript Link to comment Share on other sites More sharing options...
davej Posted December 15, 2013 Share Posted December 15, 2013 Here is my experiment... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>wide and narrow</title><style>*{margin:0;padding:0;}#sections{width:95%;text-align:center;margin:0 auto;border:1px solid black;overflow:auto;background-color:#111;}#sections div{display:inline-block;margin:2px;border:1px solid black;width:23%;height:400px;background-color:#557;}#sections:hover div,#sections.sel div{width:18%;transition:all 0.5s;-webkit-transition:all 0.5s;}#sections div:hover,#sections div.sel{width:40%;background-color:#aae;}</style><script>window.onload = init;function init(){document.getElementById('sec1').onmouseover = select;document.getElementById('sec2').onmouseover = select;document.getElementById('sec3').onmouseover = select;document.getElementById('sec4').onmouseover = select;}function select(){document.getElementById('sections').className = 'sel';var list = document.getElementById('sections').getElementsByTagName('DIV');for(var i=0,len=list.length ; i<len ; i++){if (list[i].id==this.id){list[i].className = 'sel';}else{list[i].className = 'idle';}}}</script></head><body><div id="wrap"><div id="sections"> <div id="sec1" class="idle"> </div> <div id="sec2" class="idle"> </div> <div id="sec3" class="idle"> </div> <div id="sec4" class="idle"> </div></div></div></body></html> 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