JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Блок с выбором ОС -->
<div class="mobile-os">
<!-- Операционные системы -->
<div class="ios"></div>
<div class="android"></div>
<div class="windows-phone"></div>
<!-- Ссылки на приложение -->
<div class="mobile-app-link">
<div class="ios-link">
<p><a href="">STRETCHING-GURU<br/>для iPhone</a></p>
</div>
CSS
/*Блок с выбором ОС*/
.mobile-os {
width: 1300px;
height: auto;
background-color: #fff;
margin: 0 auto 0 auto;
padding: 30px 0 0 0;
overflow: hidden;
outline: 0px solid red;
}
/*Операционные системы*/
.ios {
float: left;
width: 240px;
height: 410px;
background-image: url(http://stretching-guru.ru/wp-content/themes/Stretching-guru.v3/images/app/phone-sprite.png);
background-position: 0 0;
margin: 0 50px 0 190px;
position: relative;
top: 30px;
outline: 0px solid red;
transition: 0.3s;
-moz-transition: 0.3s;
-khtml-transition: 0.3s;
}
.android {
float: left;
width: 240px;
height: 410px;
background-image: url(http://stretching-guru.ru/wp-content/themes/Stretching-guru.v3/images/app/phone-sprite.png);
background-position: -240px 0;
margin: 0 50px 0 50px;
position: relative;
top: 30px;
outline: 0px solid red;
transition: 0.3s;
-moz-transition: 0.3s;
-khtml-transition: 0.3s;
}
.windows-phone {
float: left;
width: 240px;
height: 410px;
background-image: url(http://stretching-guru.ru/wp-content/themes/Stretching-guru.v3/images/app/phone-sprite.png);
background-position: -480px 0;
margin: 0 190px 0 50px;
position: relative;
top: 30px;
outline: 0px solid red;
transition: 0.3s;
-moz-transition: 0.3s;
-khtml-transition: 0.3s;
}
/*Ссылки на приложение*/
.mobile-app-link {
position: relative;
z-index: 80;
width: 1300px;
height: auto;
background-color: #4e8fad;
margin: 0 auto 0 auto;
overflow: hidden;
outline: 0px solid red;
}
.ios-link {
float: left;
position: relative;
width: 240px;
height: auto;
margin: 0 50px 0 190px;
outline: 0px solid red;
}
.ios-link:hover {
background-color: #31758a;
}
.ios-link p {
font-family: tahoma,arial, sans-serif;
font-size: 18px;
line-height: 1.8;
text-align: center;
}
.ios-link p a {
display: inline-block;
padding: 20px 0 20px 0;
text-decoration: none;
color:...
JavaScript
$(".ios-link").hover(
function () {
$(".ios").css({"margin-top":"-30px"})
},
function () {
$(".ios").css({"margin-top":"0"})
}
);