stop movement of elements when hovering on other element - html

Question

HI i am building a site with genesis and dynamik. On the Home page with dynamik at the top there are 3 widgets. I created 3 more underneath the top three.
My problem is when I hover on any one of the elements the rest "jumps" around. All that the hover does is to adjust the element size from 300px to 350px.
How do I manage it that only the "active" element being hover on reacts and the other 5 stays static?
I might have found a solution BUT i am still lost. Bit too new at this I believe.
The two lines of code
Does this go into a html file? I am using Wordpress and these 6 fields are populated using widgets.
From the solution I understand that I have to create first-hover to six-hover with six of the lines of code linking the images to the class.
And the using the position:absolute;
If my take on this is correct please let me know and just advice me how do I do the
code and where.
Thx

Answer 1

You should set the css in \wp-content\themes\the-theme-you-use\style.css, for example it could be like this:
.dynamik-widget-area.feature {
position: absolute;
}
Just place this anywhere at the end of the file.
Another solution is to add style="position: absolute" to the first <div> element in the following part:
<div style="position: absolute" id="ez_feature_6" class="widget-area dynamik-widget-area ez feature 6">
<section id="black-studio-tinymce-39" class="widget widget_black_studio_tinymce">
<div class="widget-wrap">
<div class="textwidget"><p style="text-align: center;"><img class="alignnone size-medium wp-image-64" src="http://new.bluprintwebsolutions.co.za/wp-content/uploads/2015/02/diy1billboard-300x300.jpg" alt="diy1billboard" width="300" height="300"></p>
</div></div></section>
</div>
However note that this will solve the overlapping problem, but in return you'll have to reposition the elements.
Repositioning can be done using css too, using for example left attribute. Something like:
.second{
left: 100px;
}
then add second to the classes of that
<div style="position: absolute" id="ez_feature_2" class="widget-area dynamik-widget-area ez feature 6 second">