daylightnanalog

Fancy Hover Social Buttons

Fluid social network buttons. On hover the network logo disappears into the distance, and text with the name of the network appears with blur/opacity filters.

Uses Sass (SCSS) + Autoprefixer

A Pen by Ben Hodgson on CodePen.

License.

daylightnanalog

CSS3 Animated Social Sharing Buttons

Playing around with different animation styles for social sharing buttons.

A Pen by Lauren Ashpole on CodePen.

License.

daylightnanalog

Animated social SVG icons (pt1)

Highly optimised monochrome SVG social icons embedded into CSS. Utilising a mix of CSS 3 and vanilla JavaScript to create hover and click animations. Incredibly lightweight with zero dependencies.

A Pen by mike foskett on CodePen.

License.

daylightnanalog

Animated social SVG icons (pt1)

Highly optimised monochrome SVG social icons embedded into CSS. Utilising a mix of CSS 3 and vanilla JavaScript to create hover and click animations. Incredibly lightweight with zero dependencies.

A Pen by mike foskett on CodePen.

License.

daylightnanalog

Card animation

Card animation with CSS and HTML and some click events, CSS variables

A Pen by Lam Chang on CodePen.

License.

daylightnanalog

Blog Post Item

Post preview with Css animations and svg icon sprite

A Pen by Nodws on CodePen.

License.

daylightnanalog

CSS3 image overlay hover effect with Bootstrap

This is a simple image overlay hover effect html page that was created by only HTML and CSS code with bootstrap framework. I added here 10 types of overlay hover effect in this page.

Anyone can use all those effect freely.

Thanks

A Pen by Mahmudul Hasan on CodePen.

daylightnanalog

Animated Card-1

A Pen by AmolB on CodePen.

License.

daylightnanalog

Animated Card-1

A Pen by AmolB on CodePen.

License.

daylightnanalog

document.getElementById('lottie').addEventListener('click', e => {
	const elements = [].concat.apply([], anim.projectInterface.compositions.map(e => e.elements));
	const baseElements = elements.map(elm => elm.baseElement);
	let element = e.target;
	let found = null;
	while(element && /^(g|path)$/.test(element.nodeName)) {
		let idx = baseElements.indexOf(element);
		if (idx !== -1) {
			found = elements[idx];
			break;