Sha256: 7c196d6622633cf26e247e56310dadd6fcda53f0e91f6404e0a33b4012a1ff19
Contents?: true
Size: 1.51 KB
Versions: 10
Compression:
Stored size: 1.51 KB
Contents
<keppler-component>
<div class="kppl-blur">
<div class="kppl-blur-img"></div>
<div class="kppl-blur-mask">
<div class="kppl-container">
<h1>Banner Blur Parallax</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare turpis eu elit ultricies mollis. Nulla sollicitudin orci mauris, nec fermentum tortor venenatis vel</p>
</div>
</div>
</div>
<style>
.kppl-blur {
width: auto;
height: 400px;
position: relative;
overflow: hidden;
}
.kppl-blur .kppl-blur-img {
background-image: url(https://images.pexels.com/photos/804954/pexels-photo-804954.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100%;
width: 100%;
position: absolute;
filter: blur(4px);
transform: scale(1.1);
}
.kppl-blur .kppl-blur-mask {
background: #00000075;
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #fff;
}
.kppl-blur .kppl-container {
max-width: 40%;
}
</style>
</keppler-component>
<script>
'kppl-banner-blur-parallax', {
label: 'Banner Blur Parallax',
category: 'Banners',
attributes: { class:'fa fa-picture-o' },
content: {
script: function(){}
}
}
</script>
Version data entries
10 entries across 10 versions & 1 rubygems