Sha256: 5c40262c31fbc9220d0f7de63902d6ef02270b8cd3f426c1615efebfa436755e
Contents?: true
Size: 1.44 KB
Versions: 10
Compression:
Stored size: 1.44 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</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/907142/pexels-photo-907142.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
background-size: cover;
background-position: center;
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', {
label: 'Banner Blur',
category: 'Banners',
attributes: { class:'fa fa-picture-o' },
content: {
script: function(){}
}
}
</script>
Version data entries
10 entries across 10 versions & 1 rubygems