Krewe Posted January 18, 2012 Share Posted January 18, 2012 Hey Guys, I am trying to make a div that is cropped too an image (200x200) when you do not hover over it, however, I want it to to go to its full size on hover.I completely understand how to achieve this, in fact, it took me two minutes . What I nee help with is that I what to add position:absolute to the hover effect so it will stay where it is originally placed, however, it will overlay any other divs so it looks like it is floating. I got that to work, but the div returns to left:0; and top:0; instead of staying in place. Is there anyway to fix this? I do not have a set left and top. If push comes to shove I might be able to convert the divs to left and top. I just don't want to. Ha. If you need code let me know. Thanks!Krewe Link to comment Share on other sites More sharing options...
dsonesuk Posted January 18, 2012 Share Posted January 18, 2012 You have to set the img container to fixed width/height the same as minimised image with position relative and float if you wish it to merge with other elements, and place where you want. Now use position: absolute for image and give the image width and height 100%, this force it fill the container, now when hovered over change width and height to auto. #smalltolarge {position: relative; height:200px; width:200px; float:left;}#smalltolarge img {position:absolute; height:100%; width:100%; top:0; left:0;}#smalltolarge:hover img {height:auto; width:auto;} <div id="smalltolarge"><img src="../myimage.jpg" alt="" /></div> Link to comment Share on other sites More sharing options...
Krewe Posted January 19, 2012 Author Share Posted January 19, 2012 Ha, well when I don't explain it correctly it doesn't help matters...I have a div tag "#inside" that contains a floated left image and text. The text obviously wraps around the image.All of that is wrapped in another div tag that is set to a default width and height of 200px. So it crops to the pic and that is all people see when it isn't hovered.When the picture is hovered over it will expand to a max width of 600px and an auto height. Right now when you hover over it everything works fine, except for the fact it will push the div tag next to it. I knew it would do this from the start.So to fix it I want to make the position absolute so it will overlay everything else. My problem is that when you make it absolute it moves it to the defautl left:0 and top:0 position.I don't want it to do this. I want the div to stay in the exact same spot, expand, and then overlay everything else. Without moving to 0,0. So if anyone can help thanks. Here is my code: <!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>html, body{width:100%;height:100%;}body{padding:0;height:0;}div#cover{float:left;width:200px;height:200px;overflow:hidden;}div#cover:hover{width:600px;height:auto;}img {float:left;}p{padding:0;margin:0;}h1{padding:0;margin:0;}</style></head><body><div id="container"><div id="cover"><div id="inside"> <img src="../Documents/CodeKrewe/website/images/clownfish.jpg" width="200px" height="200px" alt="bama" /> <p> <h1>Alabama</h1> <b>Created:</b> 1/2/12<br /> <h1>Goal:</h1> Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat. </p></div></div><div id="cover"><div id="inside"><img src="../Documents/CodeKrewe/website/images/378798_305196279522775_197915106917560_824830_107682222_n.jpg" width="200px" height="200px" alt="bama" /> <p> <h1>Alabama</h1> <b>Created:</b> 1/2/12<br /> <h1>Goal:</h1> Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat. </p></div></div></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted January 19, 2012 Share Posted January 19, 2012 <!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>html, body{/*width:100%;*/height:100%;}body{padding:0;height:0;}div.cover{float:left;width:200px;height:200px;overflow:hidden;position:relative;z-index:10;margin:10px;cursor: pointer;}div.cover:hover{overflow:visible; z-index: 100;}div.inside:hover {padding:10px;}div.inside:hover, div.inside img:hover{width:600px;height:auto;}img {float:left;}p{padding:0;margin:0;}h1{padding:0;margin:0;}.inside {position:absolute; top:0; left:0; background-color:#FFF; border: 1px solid navy;}</style></head><body><div id="container"><div class="cover"><div class="inside"> <img src="../AlienVsPredator.jpg" width="200" height="200" alt="bama" /> <p> <h1>Alabama</h1> <b>Created:</b> 1/2/12<br /> <h1>Goal:</h1> Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat. </p></div></div><div class="cover"><div class="inside"> <img src="../AlienVsPredator.jpg" width="200" height="200" alt="bama" /> <p> <h1>Alabama</h1> <b>Created:</b> 1/2/12<br /> <h1>Goal:</h1> Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat. </p></div></div></div><div style="background-color:#CCFF33;"> <p>In order to build a shared view of what can be improved, the components and priorities for the change program while those at the coal face don't have sufficient view of the overall goals. Big is no longer impregnable whether the organization's core competences are fully in line, given market realities presentation of the process flow should culminate in idea generation. Defensive reasoning, the doom loop and doom zoom empowerment of all personnel, not just key operatives, as knowledge is fragmented into specialities. Taking full cognizance of organizational learning parameters and principles, to ensure that non-operating cash outflows are assessed. Exploitation of core competencies as an essential enabler, an important ingredient of business process reengineering to focus on improvement, not cost.</p> <p>Measure the process, not the people. Building flexibility through spreading knowledge and self-organization, the components and priorities for the change program motivating participants and capturing their expectations. To ensure that non-operating cash outflows are assessed.</p> <p>In order to build a shared view of what can be improved, to experience a profound paradigm shift, as knowledge is fragmented into specialities. The vitality of conceptual synergies is of supreme importance by adopting project appraisal through incremental cash flow analysis, combined with optimal use of human resources. While those at the coal face don't have sufficient view of the overall goals.</p> <p>By moving executive focus from lag financial indicators to more actionable lead indicators, maximization of shareholder wealth through separation of ownership from management to ensure that non-operating cash outflows are assessed. Organizations capable of double-loop learning, from binary cause and effect to complex patterns, the new golden rule gives enormous power to those individuals and units. Presentation of the process flow should culminate in idea generation, working through a top-down, bottom-up approach, whenever single-loop learning strategies go wrong. Exploitation of core competencies as an essential enabler, an important ingredient of business process reengineering measure the process, not the people. To experience a profound paradigm shift, defensive reasoning, the doom loop and doom zoom.</p> <p>The new golden rule gives enormous power to those individuals and units, to ensure that non-operating cash outflows are assessed. While those at the coal face don't have sufficient view of the overall goals. The strategic vision - if indeed there be one - is required to identify that will indubitably lay the firm foundations for any leading company the components and priorities for the change program. Empowerment of all personnel, not just key operatives, in a collaborative, forward-thinking venture brought together through the merging of like minds.</p> <p>Highly motivated participants contributing to a valued-added outcome. The three cs - customers, competition and change - have created a new world for business the new golden rule gives enormous power to those individuals and units, building a dynamic relationship between the main players. To focus on improvement, not cost, taking full cognizance of organizational learning parameters and principles, the strategic vision - if indeed there be one - is required to identify.</p> <p>In order to build a shared view of what can be improved, combined with optimal use of human resources, big is no longer impregnable. Highly motivated participants contributing to a valued-added outcome. An important ingredient of business process reengineering maximization of shareholder wealth through separation of ownership from management quantitative analysis of all the key ratios has a vital role to play in this. Benchmarking against industry leaders, an essential process, should be a top priority at all times building a dynamic relationship between the main players. By adopting project appraisal through incremental cash flow analysis, taking full cognizance of organizational learning parameters and principles, the balanced scorecard, like the executive dashboard, is an essential tool.</p> <p>Motivating participants and capturing their expectations, from binary cause and effect to complex patterns, in order to build a shared view of what can be improved. Highly motivated participants contributing to a valued-added outcome. While those at the coal face don't have sufficient view of the overall goals.</p> <p>Building flexibility through spreading knowledge and self-organization, the strategic vision - if indeed there be one - is required to identify the components and priorities for the change program. The vitality of conceptual synergies is of supreme importance empowerment of all personnel, not just key operatives, exploitation of core competencies as an essential enabler. Building a dynamic relationship between the main players. Taking full cognizance of organizational learning parameters and principles.</p> <p>As knowledge is fragmented into specialities to experience a profound paradigm shift, the three cs - customers, competition and change - have created a new world for business. From binary cause and effect to complex patterns, in order to build a shared view of what can be improved, exploiting the productive lifecycle. Building a dynamic relationship between the main players.</p></div></body></html> Link to comment Share on other sites More sharing options...
Krewe Posted January 19, 2012 Author Share Posted January 19, 2012 You are awesome bud, thank you!Just a couple questions, why did you have to add a hover to the image as well? is it just to give the inside div a different effect at the same time you hover over cover?#2) I see both the inside and img hover do the same thing, so why does it retract when I hover on the text inside the inside div?#3) wtf is up with how it looks in firefox Link to comment Share on other sites More sharing options...
dsonesuk Posted January 19, 2012 Share Posted January 19, 2012 The reason I used img hover, was probably to do with the fact that i was not using 200px square, but more landscape image, so to get it to expand proportionally I used an img hover, but all that is fix now with mark#2, more stable, remains open when hovering over text or image OR margin space between image and text, and works with square, landscape image,( not tested with portrait though). Firefox problem? what FF problem elaborate. <!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>html, body{/*width:100%;*/height:100%;}body{padding:0;height:0;}div.cover{float:left;width:200px;height:200px;overflow:hidden;position:relative;z-index:10;margin:10px;cursor: pointer;}.inside {position:absolute; top:0; left:0; background-color:#FFF; border: 1px solid navy;}div.inside img {float:left;height:200px;}p{padding:0;margin:0;}h1{padding:0;margin:0;}div.cover:hover{overflow:visible; z-index: 100;}div.inside:hover{width:600px;height:auto;padding:10px;}div.inside:hover img { height:auto;}</style></head><body><div id="container"><div class="cover"><div class="inside"> <img src="../AlienVsPredator.jpg" width="100%" alt="bama" /> <p> <h1>Alabama</h1> <b>Created:</b> 1/2/12<br /> <h1>Goal:</h1> Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat. </p></div></div><div class="cover"><div class="inside"> <img src="../AlienVsPredator.jpg" width="100%" alt="bama" /> <p> <h1>Alabama</h1> <b>Created:</b> 1/2/12<br /> <h1>Goal:</h1> Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat.Our Goal is simple to be the best. Let me repeat. </p></div></div></div><div style="background-color:#CCFF33;"> <p>In order to build a shared view of what can be improved, the components and priorities for the change program while those at the coal face don't have sufficient view of the overall goals. Big is no longer impregnable whether the organization's core competences are fully in line, given market realities presentation of the process flow should culminate in idea generation. Defensive reasoning, the doom loop and doom zoom empowerment of all personnel, not just key operatives, as knowledge is fragmented into specialities. Taking full cognizance of organizational learning parameters and principles, to ensure that non-operating cash outflows are assessed. Exploitation of core competencies as an essential enabler, an important ingredient of business process reengineering to focus on improvement, not cost.</p> <p>Measure the process, not the people. Building flexibility through spreading knowledge and self-organization, the components and priorities for the change program motivating participants and capturing their expectations. To ensure that non-operating cash outflows are assessed.</p> <p>In order to build a shared view of what can be improved, to experience a profound paradigm shift, as knowledge is fragmented into specialities. The vitality of conceptual synergies is of supreme importance by adopting project appraisal through incremental cash flow analysis, combined with optimal use of human resources. While those at the coal face don't have sufficient view of the overall goals.</p></div></body></html> Link to comment Share on other sites More sharing options...
Krewe Posted January 19, 2012 Author Share Posted January 19, 2012 Awesome! Thank you Dsone, works exactly like i want it too.You actually taught me something else I wanted to know: div.inside:hover img { height:auto;} I didn't know you could write it like that.A+ Bud Thank you so much. Firefox looks perfect now, I think it was because I didn't have a picture in there, so it collapsed the empty photo to 200x200 ~Krewe Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.