Есть сайт http://www.xn--80ajbnhehmdihidodj.xn--p1ai/. У них в слайдере, при наведении курсора на иконку >, появляется выезжающий текст ("Перейти"). Как такое реализовать?
1 ответ
$('.block').hover(function() {
$(this).find('.arrow span:first-child').stop(true).toggle('fadeIn');
});
$('.blocks .block').hover(function() {
$(this).css({
'background-position': 'no-repeat',
'background-size': 'cover',
'background-image': 'url(' + $(this).parent().data('background') + ')'
});
}, function() {
$(this).css('background-image', 'none');
});
* {
box-sizing: border-box;
}
.block .title {
text-transform: uppercase;
display: block;
color: #fff;
font-size: 24px;
font-weight: 500;
text-decoration: none !important;
z-index: 11;
position: relative;
}
.block .arrow {
position: absolute;
bottom: 30px;
display: block;
text-decoration: none !important;
z-index: 11;
}
.block {
background-color: #fff;
height: 200px;
padding: 30px;
display: block !important;
width: 100%;
position: relative;
background-size: cover;
background-image: none;
}
.block:hover {
text-decoration: none;
}
.blue-dark {
background-color: #47bdfb !important;
}
.block .arrow span {
vertical-align: middle;
}
.block .arrow span:last-child {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAkCAYAAAERNkEIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjEzQjAyRTE4ODIxQjExRTVBRUQ1RDlGNzYyQTBDRDhDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjEzQjAyRTE5ODIxQjExRTVBRUQ1RDlGNzYyQTBDRDhDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTNCMDJFMTY4MjFCMTFFNUFFRDVEOUY3NjJBMENEOEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTNCMDJFMTc4MjFCMTFFNUFFRDVEOUY3NjJBMENEOEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7n18biAAABoUlEQVR42mL8//8/AwwwQen/yBxGkACMIwQSYATqAQn8A4kABBAjNgNwc+BG/4cazQAQQDAD4ALoWhiRtWIYDATCcEmQUUAs+B8CYHwGgABCcSSyMWeB+Ci6oDEQcyBLwCxEkUA3E2TUD3RBEIefAckpIMAHVoQuABNEEQBhgACCMf4A8VFkCWwY5lQWqFP/o3sQVwwZQ0MapyYmLAbg1IQ1wJEAKB29hTmVCY+i/1CF/FCb/rLgMQmk6BOyJEyxIBC/w6UIXbEbPkUwABBAMA/C8wG+MI4AORyI+fApRE64GGkAW3ogqBiZI4RPMbpOnIqxuQerYlzpE0MxvoSCGrUEUv5ZqKlHiFF0FJ8bURThUoihCJtCrIrQFcIdji8K8SqCKTxFSBGyiQcJlSQAAYbMiQDiQ/jSJLEYRDAhOfU/UgjxUWIocqY4Sw3DsQlSbDg+SSFyDSfGZpINJyWsiDacnNglaDgl6RGb4aDcw0xNA4+iV/lUDVeqRxIxhpKVVkmNBD5ycpQgJYZhq2EpNgzd0AhoU44iw3A1bAk2R4gBACTDAKPlJ1oMAAAAAElFTkSuQmCC) no-repeat;
height: 36px;
width: 21px;
display: inline-block;
}
.block .arrow span:first-child {
display: none;
height: 25px;
padding: 0px;
width: 71px;
opacity: 1;
color: #fff;
font-size: 18px;
margin-right: 13px;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container blocks">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4" data-background="http://www.xn--80ajbnhehmdihidodj.xn--p1ai/upload/iblock/adc/adc46d8ff59ae9e6660272df9b76db90.jpg">
<a href="#" class="block blue-dark">
<div class="title">Профнастил</div>
<span class="arrow">
<span>Перейти</span>
<span></span>
</span>
</a>
</div>
</div>
</div>
Отдельно стрелка, реализованная как на сайте через js:
$('a').hover(function() {
$(this).find('.arrow span:first-child').stop(true).toggle('fadeIn');
});
a {
text-decoration: none;
color:#fff;
font-size:24px;
display: block;
background: orange;
padding: 10px;
max-width: 300px;
width: 100%;
margin: 2rem auto;
}
.arrow span:last-child {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAkCAYAAAERNkEIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjEzQjAyRTE4ODIxQjExRTVBRUQ1RDlGNzYyQTBDRDhDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjEzQjAyRTE5ODIxQjExRTVBRUQ1RDlGNzYyQTBDRDhDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTNCMDJFMTY4MjFCMTFFNUFFRDVEOUY3NjJBMENEOEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTNCMDJFMTc4MjFCMTFFNUFFRDVEOUY3NjJBMENEOEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7n18biAAABoUlEQVR42mL8//8/AwwwQen/yBxGkACMIwQSYATqAQn8A4kABBAjNgNwc+BG/4cazQAQQDAD4ALoWhiRtWIYDATCcEmQUUAs+B8CYHwGgABCcSSyMWeB+Ci6oDEQcyBLwCxEkUA3E2TUD3RBEIefAckpIMAHVoQuABNEEQBhgACCMf4A8VFkCWwY5lQWqFP/o3sQVwwZQ0MapyYmLAbg1IQ1wJEAKB29hTmVCY+i/1CF/FCb/rLgMQmk6BOyJEyxIBC/w6UIXbEbPkUwABBAMA/C8wG+MI4AORyI+fApRE64GGkAW3ogqBiZI4RPMbpOnIqxuQerYlzpE0MxvoSCGrUEUv5ZqKlHiFF0FJ8bURThUoihCJtCrIrQFcIdji8K8SqCKTxFSBGyiQcJlSQAAYbMiQDiQ/jSJLEYRDAhOfU/UgjxUWIocqY4Sw3DsQlSbDg+SSFyDSfGZpINJyWsiDacnNglaDgl6RGb4aDcw0xNA4+iV/lUDVeqRxIxhpKVVkmNBD5ycpQgJYZhq2EpNgzd0AhoU44iw3A1bAk2R4gBACTDAKPlJ1oMAAAAAElFTkSuQmCC) no-repeat;
height: 36px;
width: 21px;
display: inline-block;
vertical-align: middle;
}
.arrow span:first-child {
display: none;
color: #fff;
margin-right: 1rem;
vertical-align: middle;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<a href="#">
<span class="arrow">
<span>Перейти</span>
<span> </span>
</span>
</a>
А вот вариант реализации только с помощью стилей, анимация ширины:
a {
text-decoration: none;
color:#fff;
font-size:24px;
display: block;
background: orange;
padding: 10px;
max-width: 300px;
width: 100%;
margin: 2rem auto;
}
.arrow span:last-child {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAkCAYAAAERNkEIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjEzQjAyRTE4ODIxQjExRTVBRUQ1RDlGNzYyQTBDRDhDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjEzQjAyRTE5ODIxQjExRTVBRUQ1RDlGNzYyQTBDRDhDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTNCMDJFMTY4MjFCMTFFNUFFRDVEOUY3NjJBMENEOEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTNCMDJFMTc4MjFCMTFFNUFFRDVEOUY3NjJBMENEOEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7n18biAAABoUlEQVR42mL8//8/AwwwQen/yBxGkACMIwQSYATqAQn8A4kABBAjNgNwc+BG/4cazQAQQDAD4ALoWhiRtWIYDATCcEmQUUAs+B8CYHwGgABCcSSyMWeB+Ci6oDEQcyBLwCxEkUA3E2TUD3RBEIefAckpIMAHVoQuABNEEQBhgACCMf4A8VFkCWwY5lQWqFP/o3sQVwwZQ0MapyYmLAbg1IQ1wJEAKB29hTmVCY+i/1CF/FCb/rLgMQmk6BOyJEyxIBC/w6UIXbEbPkUwABBAMA/C8wG+MI4AORyI+fApRE64GGkAW3ogqBiZI4RPMbpOnIqxuQerYlzpE0MxvoSCGrUEUv5ZqKlHiFF0FJ8bURThUoihCJtCrIrQFcIdji8K8SqCKTxFSBGyiQcJlSQAAYbMiQDiQ/jSJLEYRDAhOfU/UgjxUWIocqY4Sw3DsQlSbDg+SSFyDSfGZpINJyWsiDacnNglaDgl6RGb4aDcw0xNA4+iV/lUDVeqRxIxhpKVVkmNBD5ycpQgJYZhq2EpNgzd0AhoU44iw3A1bAk2R4gBACTDAKPlJ1oMAAAAAElFTkSuQmCC) no-repeat;
height: 36px;
width: 21px;
display: inline-block;
vertical-align: middle;
}
.arrow span:first-child {
display: inline-block;
color: #fff;
margin-right: 1rem;
vertical-align: middle;
width: 0px;
overflow: hidden;
transition: all .3s ease-in-out;
}
a:hover span:first-child {
width: 90px;
}
<a href="#">
<span class="arrow">
<span>Перейти</span>
<span> </span>
</span>
</a>
-
1
-
1@Arthur, это точно вариантом с помощью одного только css уйма, привела только один ) Как раз может быть кто-то еще предложит решения.– HamSter17 мая 2018 в 18:12