<div class="slider">
<div class="items-group">
<div class="item">
<div class="block">
<span class="circleLight"></span>
<div class="text">
<h2>Hi</h2>
<p>I`m cool card</p>
</div>
</div>
</div>
<div class="item">
<div class="block">
<span class="circleLight"></span>
<div class="text">
<h2>Hi</h2>
<p>I`m cool card</p>
</div>
</div>
</div>
<div class="item">
<div class="block">
<span class="circleLight"></span>
<div class="text">
<h2>Hi</h2>
<p>I`m cool card</p>
</div>
</div>
</div>
<div class="item">
<div class="block">
<span class="circleLight"></span>
<div class="text">
<h2>Hi</h2>
<p>I`m cool card</p>
</div>
</div>
</div>
</div>
<div class="navigations">
<ul class="dots"></ul>
</div>
</div>
.slider{
width: 100%;
height: 100vh;
.items-group{
width: 100%;
height: 100%;
position: relative;
.item{
top: 0px;
left: 0px;
opacity: 0;
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
transition: 0.5s;
visibility: hidden;
position: relative;
padding: 50px 20px;
position: absolute;
align-items: center;
justify-content: center;
box-sizing: border-box;
&:hover{
.bg{
opacity: 0.2;
}
.block{
box-shadow: 0px 0px 50px #333;
}
}
&.active{
opacity: 1;
visibility: visible;
}
.bg{
top: 0px;
left: 0px;
opacity: 1;
z-index: -1;
width: 100%;
height: 100%;
transition: 0.5s;
position: absolute;
transform: scale(1.03);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.blur{
top: 0px;
left: 0px;
z-index: -1;
width: 100%;
height: 100%;
transition: 0.5s;
filter: blur(5px);
position: absolute;
transform: scale(1.03);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.block{
width: 100%;
height: 100%;
padding: 20px;
color: #ffffff;
transition:box-shadow 0.5s;
max-width: 300px;
overflow: hidden;
max-height: 450px;
border-radius: 10px;
transform: scale(1.03);
box-sizing: border-box;
background-size: cover;
background-position: center;
background-attachment: fixed;
box-shadow: none;
.circleLight{
top: 0px;
left: 0px;
opacity: 0;
content: '';
width: 100%;
height: 100%;
display: block;
transition: 0.5s;
position: absolute;
border-radius: 10px;
background: radial-gradient(circle at 80px 40px, #fff, transparent);
}
.text{
width: 100%;
height: 100%;
display: flex;
text-align: center;
flex-direction: column;
justify-content: center;
background-position: center;
background-attachment: fixed;
}
h2{
font-family: 'Oswald', sans-serif;
font-size: 130px;
margin-bottom: 0px;
}
p{
font-family: 'Open Sans', sans-serif;
font-size: 15px;
}
&:hover{
box-shadow: 0px 0px 70px #111;
.circleLight{
opacity: 0.4;
}
}
}
}
}
.navigations{
bottom: 0px;
width: 100%;
position: absolute;
.dots{
height: 20px;
padding: 10px 0px;
text-align: center;
li{
width: 10px;
height: 10px;
cursor: pointer;
transition: 0.3s;
background: #fff;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
&+li{
margin-left: 10px;
}
&:hover{
filter: blur(2px);
}
&.active{
width: 15px;
height: 15px;
&:hover{
filter: blur(0px);
}
}
}
}
}
}
View Compiled
// Hy! You can really help me if you donate me leastways 1 dollor :)
// -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-
var mouse = {
X : 0,
Y : 0,
CX : 0,
CY : 0
},
block = {
X : mouse.X,
Y : mouse.Y,
CX : mouse.CX,
CY : mouse.CY
},
imags = [
'https://images.pexels.com/photos/4245826/pexels-photo-4245826.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
'https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?w=940&h=650&auto=compress&cs=tinysrgb',
'https://images.pexels.com/photos/210546/pexels-photo-210546.jpeg?w=940&h=650&auto=compress&cs=tinysrgb',
'https://images.pexels.com/photos/3244513/pexels-photo-3244513.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
];
$('.block').on('mousemove', function(e) {
mouse.X = (e.pageX - $(this).offset().left) - $('.block').width() / 2;
mouse.Y = (e.pageY - $(this).offset().top) - $('.block').height() / 2;
})
$('.block').on('mouseleave', function(e) {
mouse.X = mouse.CX;
mouse.Y = mouse.CY;
})
setInterval(function(){
block.CY += (mouse.Y - block.CY) / 12;
block.CX += (mouse.X - block.CX) / 12;
$('.block .circleLight').css('background', 'radial-gradient(circle at ' + mouse.X + 'px ' + mouse.Y + 'px, #fff, transparent)')
$('.block').css({
transform : 'scale(1.03) translate(' + (block.CX * 0.05) + 'px, ' + (block.CY * 0.05) + 'px) rotateX(' + (block.CY * 0.05) + 'deg) rotateY(' + (block.CX * 0.05) + 'deg)'
})
}, 20);
$('.slider .item').each(function(i){
if(i == 0){
$(this).addClass('active');
$(this).next().addClass('next');
$(this).prev().addClass('prev');
}
$(this).attr('id', 'slide-'+i);
$(this).prepend(
$('<div>', {class: 'blur', style: 'background-image: url(' + imags[i] + ');'}),
$('<div>', {class: 'bg', style: 'background-image: url(' + imags[i] + ');'})
)
$(this).find('.block').css('background-image', 'url(' + imags[i] + ')')
$('.navigations .dots').append(
$('<li>', {class: i == 0 ? 'active' : '', id: i}).on('click', function(){
var cSlide = $('.slider #slide-'+$(this).attr('id'));
$('.navigations .dots li').removeClass('active');
$(this).addClass('active');
$('.slider .item').removeClass('active prev next');
cSlide.addClass('active');
cSlide.next().addClass('next');
cSlide.prev().addClass('prev');
})
)
})
