SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    can you resized and pop out a div w/css?

    can you pop out a entire div and it's text and images w/css when the user hover over it?
    thx
    d
    or is javascript/jquery?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    can you pop out a entire div and it's text and images w/css when the user hover over it?
    Yes.

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ha ha ha! you funny Ralph!
    ok...i set myself up for that. if you know of a good link or tutorial would you kindly point me to it?
    Pleeeease?
    thx!
    :-)
    ps
    I already enclosed the div in <a href> tags but doubt just resize would work

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    OK, perhaps give some more details about what you are trying to do, as it depends on the circumstances. However, usually it involves giving the container (which you hover over) position: relative, and giving the inner div (that appears and disappears) position: absolute.

    In normal circumstances, the inner div is either set to display: none or moved way off screen with a negative margin (such as margin-left: -9999px).

    Then, which the container is hovered (e.g. div: hover) the inner div is set to display: block or margin-left: 0. It's the same technique often used for dropdown menus.

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you!
    I guess I was envisioning a div that once the user hovers over it it kinda pops out of its surroundings. basically it is a link to a new page.
    I wanted it to pop out almost like new window w/a deeper drop shadow to give it a more 3d effect and perhaps a change it the image and text to add some animation to it.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    OK, well, in that case you can just changes the styles on the div as it is hovered. You can set an <a> to display: block and do it to that as well, although I'd only say use an <a> if the contents of the box are fairly simple (as it's better not to have block elements like <p>s etc. inside an <a>).

    Here's a quick example I just whipped up. I'm sure there are better ways, but this is a start, at least:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style media="all">
    
    body {
      margin: 30px;
      }
    
    div {
      border: 1px solid rgba(0,0,0,0.4); 
      background: #f7f7f7; 
      float: left; 
      position: relative; 
      width: 100px; 
      height: 100px; 
      padding: 10px;
      }
    
    div:hover {
      width: 110px; 
      height: 110px; 
      margin: -5px 0 0 -5px; 
      box-shadow: 0 0 8px rgba(0,0,0,0.8); 
      z-index: 10;
      }
      
    </style>
    	
    </head>
    <body>
    
    	<div>
    		<p>Text with <a href="">Link</a></p>
    	</div>
    	<div>
    		<p>Text with <a href="">Link</a></p>
    	</div>
    	<div>
    		<p>Text with <a href="">Link</a></p>
    	</div>
    	<div>
    		<p>Text with <a href="">Link</a></p>
    	</div>
    
    </body>
    </html>

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you Ralph, will go try it out and see what haps!

  8. #8
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    ok not quite this is what i have

    hoverDiv01.jpg
    and
    hoverDiv02.jpg

    and feel free to comment on the design if you wish. right now it is in the "kick the tires" of the theme to get used to it (which has to be responsive, but one step at the time)
    so i realize it looks a bit boring.
    thx
    D
    & the images are just place holders. needed to grab something off the net.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Certainly you don't want position:absolute on hover. My example should work nicely there. anyhow, you could just add a box-shadow to the div on hover.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    For modern browsers you could scale the contents so that they pop out.

    e.g.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body { text-align:center }
    .box {
    	display:inline-block;
    	width:30%;
    	border:1px solid #000;
    	vertical-align:top;
    }
    .box h2, .box p {
    	padding:0 10px;
    	margin:0 0 1em
    }
    .box:hover {
    	-webkit-transform: scale(1.2);
    	-moz-transform: scale(1.2);
    	-o-transform: scale(1.2);
    	-ms-transform: scale(1.2);
    	transform:scale(1.2);
    	box-shadow:20px 20px 2px rgba(0,0,0,0.5);
    	position:relative;
    	top:-.4em;
    	background:#f2f2f2;
    }
    </style>
    <!--[if lte IE 8]>
    <style type="text/css">
    .box:hover {
    	zoom:1.2;
    	position:relative;
    	top:0;
    }
    </style>
    <![endif]-->
    </head>
    
    <body>
    <h1>Zoom test ie9+</h1>
    <div class="box">
    		<h2>heading test</h2>
    		<p>Lorem ipsum dolor sit amet lorem  ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem </p>
    </div>
    <div class="box">
    		<h2>heading test</h2>
    		<p>Lorem ipsum dolor sit amet lorem  ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem </p>
    </div>
    <div class="box">
    		<h2>heading test</h2>
    		<p>Lorem ipsum dolor sit amet lorem  ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem </p>
    </div>
    </body>
    </html>

  11. #11
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you folks will go ahead and try these out some more.

  12. #12
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It worked awesome! thank you esteemed developers!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •