<a href="#" class="img__link"> <img src="path" /></a>
a { display: block; position: relative; }
a:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); opacity: 0; }
a:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(icon-path); opacity: 0; }
a:hover:before,
a:hover:after { opacity: 1; }
<a href="#" class="img__link">
<img src="path" />
<span class="img__mask"><i class="img__icon"></i></span>
</a>
a { display: block; position: relative; }
.mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); opacity: 0; }
a:hover:after {
opacity: 1;
}
$(".owl-carousel").owlCarousel({
dots: false
});
.custom-owl-carousel .owl-nav [class*=owl-] {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top: -20px;
}
.custom-owl-carousel .owl-nav button.owl-prev {
left: -24px;
}
.custom-owl-carousel .owl-nav button.owl-next {
right: -24px;
}
.wrapper {
width: 100%;
height: 100%;
background: linear-gradient(to right, green 50%, red 50%);
}
если bootstrap ее ограничивает
видимо бутстрап такого не предусматривает
container
, а он в свою очередь ограничивает ширину содержимого. Что бы такого не было, нужно использовать класс container-fluid
.<div class="container"> <!-- max-width: 1200px -->
<div class="row">content</div>
</div>
<div class="container-fluid"> <!-- max-width: 100% -->
<div class="row">content</div>
</div>
document.getElementById('link1').addEventListener('click', function(event) {
event.preventDefault();
document.getElementById('link2').click();
});
span
аттрибут value
и name
? Вам нужна структура типа<span class="currency-shop1" id="sum" data-value="774.41">774.41 руб.</span>
<input type="hidden" name="total_sum" id="some_id" value="">
$('some-form').on('submit', function(event) {
var $this = $(this);
var priceInput = $this.find('#some_id');
var sum = $this.find('#sum').data('value');
priceInput.val(sum);
....Отправка формы со всеми полями....
});