Хочу сделать точно такой же выезжающий блок (стиль не обязательно соблюдать) как тут. Слева 4 выезжающих блока
3 ответа
Вот накидал небольшой пример:
div {
position: relative;
left: -70px;
width: 100px;
height: 50px;
background: #000;
margin-top: 5px;
transition: left .2s linear;
}
div:hover {
left: 0px;
}
<div></div>
<div></div>
<div></div>
<div></div>
.slide-container {
left: 0;
position: absolute;
top: 8px;
}
.slide-container .slide {
background-color: #232323;
border: solid #777;
border-width: 2px 2px 2px 0;
color: #fff;
height: 48px;
line-height: 48px;
margin: 16px 0 0 -170px;
position: relative;
text-align: center;
width: 200px;
-moz-transition: margin 1s;
-o-transition: margin 1s;
-webkit-transition: margin 1s;
transition: margin 1s;
}
.slide-container .slide:hover {
margin-left: 0;
}
.slide-container .slide .slide-content {
float: left;
width: 170px;
}
.slide-container .slide .slide-header {
float: left;
width: 30px;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.slide-container .slide:hover .slide-header {
opacity: 0;
}
<div class="slide-container">
<div class="slide">
<div class="slide-content">Slide 1 contents</div>
<div class="slide-header">1</div>
</div>
<div class="slide">
<div class="slide-content">Slide 2 contents</div>
<div class="slide-header">2</div>
</div>
<div class="slide">
<div class="slide-content">Slide 3 contents</div>
<div class="slide-header">3</div>
</div>
</div>
+Вариант с трансформацией:
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: block;
width: 200px;
height: 50px;
margin: 10px 0;
background: #ccc;
border: 1px solid #000;
border-radius: 4px;
cursor: pointer;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transform: translateX(-90%);
-moz-transform: translateX(-90%);
-ms-transform: translateX(-90%);
-o-transform: translateX(-90%);
transform: translateX(-90%);
}
li:hover {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>