Product caption blur

Developer
T.J. Fogarty
Size
3,350 Kb
Views
16,192
  1. Product caption blur Previews
  2. Product caption blur HTML Codes
  3. Product caption blur CSS Codes
  4. Product caption blur JS Codes

How do I make an product caption blur?

A caption for a product which appears to blur the background behind it. Uses a positioned duplicate background.. What is a product caption blur? How do you make a product caption blur? This script and codes were developed by T.J. Fogarty on 08 November 2022, Tuesday.

Product caption blur Previews
IQ Test

Product caption blur - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Product caption blur</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { box-sizing: border-box;
}
h1 { text-align: center;
}
.products { list-style: none; padding: 0; width: 50%; margin: 0 auto;
}
.products li { margin: 0; padding: 0; float: left; padding: 0 5px;
}
.products a { display: block; text-decoration: none;
}
.product { margin: 0 0 20px 0; max-height: 400px; position: relative; color: #fff; overflow: hidden;
}
.product .product__caption { position: absolute; bottom: 0; padding: 10px; min-height: 100px; width: 100%; border-top: 1px solid white;
}
.product .product__caption .product__caption-background { position: absolute; top: 0; left: 0; background-position: 100% 100%; width: 100%; height: 100%; -webkit-filter: blur(4px); filter: blur(4px);
}
.product__name, .product__price { position: relative; z-index: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div ng-app> <div ng-controller="ProductController"> <h1>{{products.length}} Products</h1> <ul class="products"> <li ng-repeat="product in products"> <a href="#"> <figure class="product"> <img src="{{product.image}}" alt="{{product.name}}" class="product__image"> <figcaption class="product__caption"> <h3 class="product__name">{{product.name}}</h3> <span class="product__price">{{product.price}}</span> <div class="product__caption-background" style="background-image: url({{product.image}})" class="product__caption-background"></div> </figcaption> </figure> </a> </li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Product caption blur - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
h1 { text-align: center;
}
.products { list-style: none; padding: 0; width: 50%; margin: 0 auto;
}
.products li { margin: 0; padding: 0; float: left; padding: 0 5px;
}
.products a { display: block; text-decoration: none;
}
.product { margin: 0 0 20px 0; max-height: 400px; position: relative; color: #fff; overflow: hidden;
}
.product .product__caption { position: absolute; bottom: 0; padding: 10px; min-height: 100px; width: 100%; border-top: 1px solid white;
}
.product .product__caption .product__caption-background { position: absolute; top: 0; left: 0; background-position: 100% 100%; width: 100%; height: 100%; -webkit-filter: blur(4px); filter: blur(4px);
}
.product__name, .product__price { position: relative; z-index: 1;
}

Product caption blur - Script Codes JS Codes

function ProductController($scope) { $scope.products = [ {name: 'First Product', price: '€10', image: 'http://lorempixel.com/200/400/fashion/1'}, {name: 'Second Product', price: '€10', image: 'http://lorempixel.com/200/400/fashion/2'}, {name: 'Third Product', price: '€10', image: 'http://lorempixel.com/200/400/fashion/3'}, {name: 'Fourth Product', price: '€10', image: 'http://lorempixel.com/200/400/fashion/4'}, {name: 'Fifth Product', price: '€10', image: 'http://lorempixel.com/200/400/fashion/5'}, {name: 'Sixth Product', price: '€10', image: 'http://lorempixel.com/200/400/fashion/6'} ];
}
Product caption blur - Script Codes
Product caption blur - Script Codes
Home Page Home
Developer T.J. Fogarty
Username tjFogarty
Uploaded November 08, 2022
Rating 3
Size 3,350 Kb
Views 16,192
Do you need developer help for Product caption blur?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

T.J. Fogarty (tjFogarty) Script Codes
Name
Notify
Expanding Navigation
Generate mobile navigation
A Pen by T.J. Fogarty
Gyroscope type effect
Caption reveal
Toggle content
Full-screen overlay
Responsive Hexagon Grid
Hexagon grid - Stage 1
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!