Адаптивное меню из нескольких изображений под bootstrap, с изменяющимися картинками при наведении мыши.
<style type="text/css">
.izo1 {
display: inline-block;
}
.izo1:hover img {
opacity: 0;
}
.izo1:hover {
background: url("http://site.com/image/Moskva_hover.jpg") no-repeat 50% 50%;
background-size: 100%, auto;
margin-bottom: 10px;
width: 100%;
height: auto;
max-width: 330px;
max-height: 330px;
}
.izo2 {
display: inline-block;
}
.izo2:hover img {
opacity: 0;
}
.izo2:hover {
background: url("http://site.com/image/sankt-peterburg_hover.jpg") no-repeat 50% 50%;
background-size: 100%, auto;
margin-bottom: 10px;
width: 100%;
height: auto;
max-width: 330px;
max-height: 330px;
}
.izo3 {
display: inline-block;
}
.izo3:hover img {
opacity: 0;
}
.izo3:hover {
background: url("http://site.com/image/TVER_hover.jpg") no-repeat 50% 50%;
background-size: 100%, auto;
margin-bottom: 10px;
width: 100%;
height: auto;
max-width: 330px;
max-height: 330px;
}
</style>
<div style="text-align: center;">
<p style="text-align: center; font-size: 32px; color: #ffffff; font-family: 'Open Sans';">Пожалуйста выберите Ваш город</p>
</div>
<div style="text-align: center;">
<div class="text-center col-lg-4 col-md-4 col-sm-4 col-xs-12">
<a href="http://site.com/Moscow" class="izo1">
<img src="http://site.com/image/Moskva.jpg" style="margin-bottom: 10px; width: 100%; height: auto; max-width: 330px; max-height: 330px;" />
</a>
</div>
<div class="text-center col-lg-4 col-md-4 col-sm-4 col-xs-12">
<a href="http://site.com/sankt-peterburg" class="izo2">
<img alt="" src="http://site.com/image/sankt-peterburg.jpg" style="margin-bottom: 10px; width: 100%; height: auto; max-width: 330px; max-height: 330px;" />
</a>
</div>
<div class="text-center col-lg-4 col-md-4 col-sm-4 col-xs-12">
<a href="http://site.com/Tver" class="izo3" >
<img alt="" src="http://site.com/image/TVER.jpg" style="margin-bottom: 10px; width: 100%; height: auto; max-width: 330px; max-height: 330px;" />
</a>
</div>
</div>
Нет комментариев