Change image button in Hover with Bootstrap - image

Question

is lot of time I'm trying to have 3 columns button in bootstrap that change image in Hover.
I have tryed everything but nothing work, all the solution I've found broken the lines of Bootstrap or cause me lot of problem.
Can someone help me to do this? http://s3.postimg.org/j1yibn3pv/Schermata_2015_08_04_alle_11_35_20.png
Please, I'm desperate!

Answer 1

<div class="container">
<div id="box-servizi" class="section-shadow">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" id="promozioni">
<a href="#" title="Scopri tutte le nostre Promozioni">
<img class="section-shadow img-responsive normal" src="img/box-servizi/promozioni.jpg" alt="Immagine Promozioni Lodigiani Concessionaria" title="Scopri tutte le nostre Promozioni!" />
<img class="img-responsive hover" src="img/box-servizi/promozioni-h.jpg" alt="Immagine Mouse Hover Promozioni Lodigiani Concessionaria" title="Scopri tutte le nostre Promozioni!" />
</a>
</div><!-- /promozioni -->
</div><!-- /box-servizi -->
</div><!-- /container -->
<!-- /BOX SERVIZI -->
#box-servizi {
background: #ffffff;
margin: 50px 0px;
padding-bottom: 50px;
padding-top: 20px;
overflow: hidden;
}
#box-servizi>div {
margin-top: 25px;
height: 100px;
position: relative;
padding-right: 50px;
}
#box-servizi>div>a>img{
display: block;
position: absolute;
/* transitions */
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
#box-servizi>div>a>img.normal{
filter: alpha(opacity=100); /* IE stuff */
opacity: 1;
z-index: 2;
}
#box-servizi>div>a>img.hover{
filter: alpha(opacity=0); /* IE stuff */
opacity: 0;
z-index: 1;
}
/* hover */
#box-servizi>div>a:hover>img.normal{
filter: alpha(opacity=0);
opacity: 0;
z-index: 1;
}
#box-servizi>div>a:hover>img.hover{
filter: alpha(opacity=100);
opacity: 1;
z-index: 2;
}

Answer 2

My solution:
/* ==========================================================================
SERVIZI
========================================================================== */
#servizi-bottom {
margin-top: 50px;
margin-bottom: 40px;
}
#servizi-bottom>.container>a>div {
padding: 2.205% 0%;
}
#servizi-bottom h3 {
text-align: center;
text-transform: uppercase;
color: #ffffff;
letter-spacing: 0.1em;
font-style: italic;
}
.servizi-button {
border: 10px solid rgba(0, 0, 0, 0);
}
/* Promozioni
=================================== */
#box-promozioni {
background: transparent url("../img/box-servizi/promozioni.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-promozioni {
background-image: url("../img/box-servizi/promozioni-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-promozioni h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Servizi
=================================== */
#box-servizi {
background: transparent url("../img/box-servizi/servizi.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-servizi {
background-image: url("../img/box-servizi/servizi-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-servizi h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Test Drive
=================================== */
#box-testdrive {
background: transparent url("../img/box-servizi/testdrive.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-testdrive {
background-image: url("../img/box-servizi/testdrive-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-testdrive h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Contatti
=================================== */
#box-contatti {
background: transparent url("../img/box-servizi/contatti.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-contatti {
background-image: url("../img/box-servizi/contatti-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-contatti h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Tagliando
=================================== */
#box-tagliando {
background: transparent url("../img/box-servizi/tagliando.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-tagliando {
background-image: url("../img/box-servizi/tagliando-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-tagliando h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Officina
=================================== */
#box-officina {
background: transparent url("../img/box-servizi/officina.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-officina {
background-image: url("../img/box-servizi/officina-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-officina h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
<!-- !BOX SERVIZI -->
<div class="row" id="servizi-bottom">
<div class="container">
<a href="#" title="Scopri tutte le nostre Promozioni">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-promozioni">
<h3>promozioni</h3>
</div>
</a><!-- /box-promozioni -->
<a href="#" title="Tutto ciò che offriamo">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-servizi">
<h3>servizi</h3>
</div>
</a><!-- /box-servizi -->
<a href="#" title="Tutto sui nostri Test Drive">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-testdrive">
<h3>test drive</h3>
</div>
</a><!-- /box-testdrive -->
<a href="#" title="Scopri come Contattarci!">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-contatti">
<h3>contatti</h3>
</div>
</a><!-- /box-contatti -->
<a href="#" title="Tagliando">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-tagliando">
<h3>tagliando</h3>
</div>
</a><!-- /box-tagliando -->
<a href="#" title="Le nostre Officine">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-officina">
<h3>officina</h3>
</div>
</a><!-- /box-officina -->
</div><!-- /container -->
</div><!-- /row -->
<!-- /BOX SERVIZI -->
What do you think?