overflow: hidden, font-size, line-height, max-height: calc(a * b)
где:<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</div>
.text {
overflow: hidden;
font-size: 16px;
line-height: 1.5;
max-height: calc(1.5em * 5);
}
background: url('image.png') no-repeat 50% 50px/500px auto;
background-image: url('image.png');
background-repeat: no-repeat;
background-position: 50% 50px;
background-size: 500px auto;
<div class="wrap">
<div class="block visible">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
</div>
.block {
display: none;
}
.block.visible {
display: block;
}
function toggler(selector, delay) {
let elems = $(selector),
length = elems.length-1,
i = 0;
function toggleTo(index) {
elems.removeClass('visible');
$(elems[index]).addClass('visible');
}
setInterval(function(){
toggleTo(i === length ? i = 0 : ++i)
}, delay);
}
toggler('.block', 1000);
.content {
justify-content: center;
}
.circ {
margin-left: auto;
margin-right: auto;
}
#header { background: url(img/furniture.jpg); }
или
body { background: url(img/furniture.jpg); }
и увидишь. p {
visibility: hidden;
opacity: 0;
transition: visibility ease 0s, opacity ease 1s;
}
li:hover p {
visibility: visible;
opacity: 1;
}
<ul class="Reviews col-md-12">
<li class="rev"><span>Lorem ipsum dolor.</span><a href="#">Смотреть обзор</a></li>
<li class="rev"><span>Lorem ipsum dolor.</span><a href="#">Смотреть обзор</a></li>
<li class="rev"><span>Lorem ipsum dolor.</span><a href="#">Смотреть обзор</a></li>
</ul>
.Reviews {
counter-reset: a;
}
.rev {
display: flex;
height: 50px;
counter-increment: a;
margin-bottom: 10px;
}
.rev:before {
content: counter(a);
display: block;
flex-basis: 50px;
background-color: #fff;
border: 1px solid currentColor;
display: flex;
justify-content: center;
align-items: center;
color: #0af;
}
.rev span {
background-color: #ccc;
height: 100%;
display: flex;
align-items: center;
flex-grow: 1;
padding: 0 30px;
}
.rev a {
background: #009cff;
color: #fff;
text-decoration: none;
display: flex;
align-items: center;
padding: 0 15px;
}
transform:translate3d(0,0,0) scale(1)
. При ховере соответственно будет - translate3d(0,0,0) scale(1.1)
. В моем случае стрелки перестали исчезать. #wrapper { overflow: hidden }
, а во время открытия меню - убирайте.data-aos-*
, которые анимируются при скроле, в дефолтном состоянии находятся за вьюпортом, в результате чего появляется горизонтальная прокрутка. <img src="https://unsplash.it/700/300" alt="" />
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
max-width: 100vw;
max-height: 100vh;
}
scale
должен идти после translateX
.transform: translateX(500px) scale(1.5);