This situation presents a unique challenge.
Below is the HTML code.
<div class="foo">
<div class="bar">
<div class="a">
<h2>Luigi's Mansion1</h2>
<small>08/27/2013</small>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://dribbble.com/shots/1212598-Luigi-s-Mansion" target="_blank">Artwork by Scott Balmer</a> </p>
</div>
</div>
<div class="bar">
<div class="a">
<h2>Luigi's Mansion1</h2>
<small>08/27/2013</small>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://dribbble.com/shots/1212598-Luigi-s-Mansion" target="_blank">Artwork by Scott Balmer</a> </p>
</div>
</div>
</div>
CSS Code:
.foo{
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
margin: 0 auto;
}
.bar{
margin: 0;
width: 400px;
height: 100px;
background: #f0f0f0 url(images/nav_a.gif) repeat-x;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
-webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
-moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
-ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ;
transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
.bar:hover {
background: #ddd;
cursor: pointer;
margin: -20px;
width: 410px;
height: 120px;
}
View the interactive demo on JSFiddle.
I am attempting to achieve a specific effect where hovering over any div container with the "bar" class will result in an increase in its dimensions without displacing other divs beneath it. Is this achievable solely through CSS or would I need to incorporate JavaScript for this functionality?
Please provide guidance on how to implement this effect seamlessly without affecting the position of other elements.