CSS element pushes content down - css

Question

I have 3 elements on my site that starts with an icon, which I have animated with CSS on hover. But when I hover, the whole section is pushed down. I do only wish to affect the icon. This is probably a positioning thing, but I have tried several things that I know of, but nothing seem to work the way I wish. The site is build with Bootstrap by the way, but that is probably not part of my problem.
The site can be seen here: http://www.vielendank.dk/bootstrap
(halfway down - the blue section)
The html look like this:
<div class="span4 text-center">
<div class="komp"><div class="komp-ikon">
<i class="icon-pencil"></i></div>
<h4>Grafisk design</br>og rentegning</h4></br>
Vi elsker design! Grafisk design og rentegning er vielen danks absolutte
spidskompetence – vi vil gå så vidt som at kalde os selv for nørder.
</div></div>
The CSS look like this:
.komp{
display: block;
}
.komp-ikon{
font-size: 40px;
color:#007fa7;
padding-top: 20px;
background-color: white;
width: 80px;
height: 60px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
-moz-border-radius: 6%;-khtml-border-radius: 6%;-webkit-border-radius: 6%;border-radius: 6%;
-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
-moz-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;}
.komp:hover .komp-ikon{
color: #41ab29;
font-size: 60px;
padding-top: 20px;
background-color: white;
width: 100px;
height: 80px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
-moz-border-radius: 4%;-khtml-border-radius: 4%;-webkit-border-radius: 4%;border-radius: 4%;
-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);}
.komp:hover h4{
color:#41ab29;
font-family: 'Montserrat Alternates', sans-serif;
font-weight: 400;
margin-bottom: 0px;
padding-bottom: 0px;}
Thanks guys...

Answer 1

Simply give that div a fixed height:
.section.blue {
height: 350px;
}
Or if you want the selector to be more specific:
.section.blue .container .row {
height: 270px;
}

Answer 2

Try this:
CSS
.komp {
display: block;
padding: 100px 0 0;
}
.komp-ikon {
font-size: 40px;
color:#007fa7;
padding-top: 20px;
background-color: white;
width: 80px;
height: 60px;
margin: 0 0 0 -40px;
-moz-border-radius: 6%;
-khtml-border-radius: 6%;
-webkit-border-radius: 6%;
border-radius: 6%;
position: absolute;
top: 20px;
left: 50%;
-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
-moz-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
}
.komp:hover .komp-ikon {
color: #41ab29;
font-size: 60px;
padding-top: 20px;
background-color: white;
width: 100px;
height: 80px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
-moz-border-radius: 4%;-khtml-border-radius: 4%;-webkit-border-radius: 4%;border-radius: 4%;
-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);}
.komp:hover h4{
color:#41ab29;
font-family: 'Montserrat Alternates', sans-serif;
font-weight: 400;
margin-bottom: 0px;
padding-bottom: 0px;
}
HTML
<div class="span4 text-center">
<div class="komp">
<div class="komp-ikon">
<i class="icon-pencil"></i>
</div>
<h4>Grafisk design</br>og rentegning</h4></br>
Vi elsker design! Grafisk design og rentegning er vielen danks absolutte
spidskompetence – vi vil gå så vidt som at kalde os selv for nørder.
</div>
</div>
I positioned it absolutely and then padded the content container so that it wont fall behind the button.
Not sure where you are going to use this, but it might be worth checking into creating a holding container for the button only, to make it more flexible :)

Answer 3

I solved the problem
I addede a
.komp{postition: absolute;}
For some reason you need this to position elements within this element. The only thing now is centering af the icons which does not work with margin-left/right: auto, but I will figure that one out hopefully.
Thanks for the advice...