css resizing boxes on roll over?

Associate
Joined
19 Jul 2006
Posts
1,847
If i have the below code which basically is 3 boxes with the middle one been slightly bigger Is it going to be dificult to have al 3 boxes the same size but when the cursor is over one of them then that box becomes the big box?

Code:
				<div class="full"><h3>Three Columns</h3></div>

				<div class="divider"></div>
				<div class="divider"></div>

				<div class="pricing_box  three">
				<div class="header"><h4>Starter Kit</h4></div>
				<h2>$199/year</h2>
				<ul>
				<li><strong>75 Lorem ipsum storage</strong></li>
				<li><strong>333 Dolor / sit</strong></li>
				<li><strong>22 Duis</strong></li>
				<li><strong>7 Praesent nec tellus</strong></li>
				</ul>
				<p><br/></p>
				<div class="center"><a href="#" class="bttn"><span>Sign Up</span></a></div>
				<p><br/></p>
				</div>

				<div class="pricing_box large three">
				<div class="header"><h4>Standard Kit</h4></div>
				<h2>$399/year</h2>
				<ul>
				<li><strong>175 Lorem ipsum storage</strong></li>
				<li><strong>1333 Dolor / sit</strong></li>
				<li><strong>122 Duis</strong></li>
				<li><strong>17 Praesent nec tellus</strong></li>
				</ul>
				<p><br/></p>
				<div class="center"><a href="#" class="bttn"><span>Sign Up</span></a></div>
				<p><br/></p>
				</div>

				<div class="pricing_box  three">
				<div class="header"><h4>Premium Kit</h4></div>
				<h2>$599/year</h2>
				<ul>
				<li><strong>275 Lorem ipsum storage</strong></li>
				<li><strong>2333 Dolor / sit</strong></li>
				<li><strong>222 Duis</strong></li>
				<li><strong>27 Praesent nec tellus</strong></li>
				</ul>
				<p><br/></p>
				<div class="center"><a href="#" class="bttn"><span>Sign Up</span></a></div>
				<p><br/></p>
				</div>
 
No, but if you want a straight CSS swap use the psuedo selector :hover on the pricing box div to override the size settings they may have.
 
Back
Top Bottom