.class_1 {
@extend .class_2;
right: 0;
left: 0;
}
.class_2 {
position: absolute;
top: 0;
bottom: 0;
}%position {
position: absolute;
top: 0;
bottom: 0;
}
.class_1 {
@extend %position;
right: 0;
left: 0;
}
.class_2 {
@extend %position;
}
.parent
.child__img
.child__hover
.title
| my title
.desc
| my description
.parent{
position: relative;
}
.child__img{
тут код для картинки
}
.child__hover{
display: none;
}
.parent:hover .child__hover {
display: block;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
background: #ccc;
}
.title{
стиль заголовка
}
.desc{
стиль описания
}
@media (width: 1024px) {
.box-1,
.box-2 {
width: 50%;
}
.box-3 {
width: 100%;
}
.box-4,
.box-5 {
width: 50%;
}
}
@media (width: 768px) {
.box-1 {
width: 100%;
}
.box-2, .box-3, .box-4 {
width: 33%;
}
.box-5 {
width: 100%;
}
}// в них добавляешь что то типо того
appendDots: $(this).closest('.slider').find('.SlickNavBlock'),
appendArrows: $(this).closest('.slider').find('.SlickNavBlock'),prevArrow: '<span class="slick-arrow_custom-left"></span>',
nextArrow: '<span class="slick-arrow_custom-rigth"></span>',
dotsClass: 'slick-custom-dots',