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?

Yes. :slight_smile:

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!
:slight_smile:
ps
I already enclosed the div in <a href> tags but doubt just resize would work

:smiley: 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.

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.

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:

<!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>

thank you Ralph, will go try it out and see what haps!

and

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.

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.

Hi,

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

e.g.


<!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>


Thank you folks will go ahead and try these out some more.

It worked awesome! thank you esteemed developers!