Замена блока на фотографию при наведении курсора

Пример:

HTML:

<div class="items">
	<div class="item">
		<a href="#item">
			<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
				<defs>
					<clipPath id="clip-0">
						<circle cx="0" cy="0" r="150px"></circle>
					</clipPath>
				</defs>
				<text dy=".3em" x="50%" y="50%">
					Фото 1
				</text>
				<g clip-path="url(#clip-0)">
					<image preserveAspectRatio="xMinYMin slice" xlink:href="/photo.jpg"></image>
				</g>
			</svg>
		</a>
	</div>
	<div class="item">
		<a href="#item">
			<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
				<defs>
					<clipPath id="clip-1">
						<circle cx="0" cy="0" r="150px"></circle>
					</clipPath>
				</defs>
				<text dy=".3em" x="50%" y="50%">
					Фото 2
				</text>
				<g clip-path="url(#clip-1)">
					<image preserveAspectRatio="xMinYMin slice" xlink:href="/photo.jpg"></image>
				</g>
			</svg>
		</a>
	</div>

<!-- Еще блоки -->

	<div class="item">
		<a href="#item">
			<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
				<defs>
					<clipPath id="clip-5">
						<circle cx="0" cy="0" r="150px"></circle>
					</clipPath>
				</defs>
				<text dy=".3em" x="50%" y="50%">
					Фото 6
				</text>
				<g clip-path="url(#clip-5)">
					<image preserveAspectRatio="xMinYMin slice" xlink:href="/photo.jpg"></image>
				</g>
			</svg>
		</a>
	</div>
</div>

<defs>

</clipPath>

</defs>

Фото 1

</text>

</g>

</svg>

</a>

</div>

<defs>

</clipPath>

</defs>

Фото 2

</text>

</g>

</svg>

</a>

</div>

<defs>

</clipPath>

</defs>

Фото 6

</text>

</g>

</svg>

</a>

</div>

Обратите внимание на ID у элемента clipPath и его использование

CSS:

.items {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
.items svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.items circle {
	transform-origin: 50% 50%;
	transform: scale(0);
	fill: #000;
	transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.items text {
	font-size: 18px;
	text-transform: uppercase;
	text-anchor: middle;
	letter-spacing: 1px;
	font-weight: 600;
	fill: #FFF;
	font-family: Verdana, sans-serif;  
}
.items image {
	transform: scale(1.1);
	transform-origin: 50% 50%;
	transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
	width: 100%;
	height: 100%;
}
.item {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	width: 300px;
	height: 200px;
	margin: 10px;
	cursor: pointer;
	background-color: #337AB7;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.item:hover circle,
.item:hover image {
	transform: scale(1);
}

.items {

display: flex;

flex-flow: row wrap;

justify-content: center;

}

.items svg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.items circle {

transform-origin: 50% 50%;

transform: scale(0);

fill: #000;

transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.items text {

font-size: 18px;

text-transform: uppercase;

text-anchor: middle;

letter-spacing: 1px;

font-weight: 600;

fill: #FFF;

font-family: Verdana, sans-serif;

}

.items image {

transform: scale(1.1);

transform-origin: 50% 50%;

transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

width: 100%;

height: 100%;

}

.item {

display: flex;

align-items: center;

justify-content: center;

position: relative;

overflow: hidden;

width: 300px;

height: 200px;

margin: 10px;

cursor: pointer;

background-color: #337AB7;

border-radius: 12px;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

.item:hover circle,

.item:hover image {

transform: scale(1);

}

JS:

var items = [], point = document.querySelector('svg').createSVGPoint();
function getCoordinates(e, svg) {
	point.x = e.clientX;
	point.y = e.clientY;
	return point.matrixTransform(svg.getScreenCTM().inverse());
}
function Item(config) {
	Object.keys(config).forEach(function (item) {
		this[item] = config[item];
	}, this);
	this.el.addEventListener('mousemove', this.mouseMoveHandler.bind(this));
	this.el.addEventListener('touchmove', this.touchMoveHandler.bind(this));
}
Item.prototype = {
	update: function update(c) {
		this.clip.setAttribute('cx', c.x);
		this.clip.setAttribute('cy', c.y);
	},
	mouseMoveHandler: function mouseMoveHandler(e) {
		this.update(getCoordinates(e, this.svg));
	},
	touchMoveHandler: function touchMoveHandler(e) {
		e.preventDefault();
		var touch = e.targetTouches[0];
		if (touch) return this.update(getCoordinates(touch, this.svg));
	}
};
[].slice.call(document.querySelectorAll('.item'), 0).forEach(function (item, index) {
	items.push(new Item({
		el: item,
		svg: item.querySelector('svg'),
		clip: document.querySelector('#clip-'+index+' circle'),
	}));
});

var items = [], point = document.querySelector('svg').createSVGPoint();

function getCoordinates(e, svg) {

point.x = e.clientX;

point.y = e.clientY;

return point.matrixTransform(svg.getScreenCTM().inverse());

}

function Item(config) {

Object.keys(config).forEach(function (item) {

this[item] = config[item];

}, this);

this.el.addEventListener('mousemove', this.mouseMoveHandler.bind(this));

this.el.addEventListener('touchmove', this.touchMoveHandler.bind(this));

}

Item.prototype = {

update: function update(c) {

this.clip.setAttribute('cx', c.x);

this.clip.setAttribute('cy', c.y);

mouseMoveHandler: function mouseMoveHandler(e) {

this.update(getCoordinates(e, this.svg));

touchMoveHandler: function touchMoveHandler(e) {

e.preventDefault();

var touch = e.targetTouches[0];

if (touch) return this.update(getCoordinates(touch, this.svg));

}

};

[].slice.call(document.querySelectorAll('.item'), 0).forEach(function (item, index) {

items.push(new Item({

el: item,

svg: item.querySelector('svg'),

clip: document.querySelector('#clip-'+index+' circle'),

}));

});

Найдено на codepen.io у пользователя Noel Delgado

Пример:

HTML:

CSS:

JS:

Смотрите также:

Параллакс эффект simpleParallax

Анимированный Tab Bar

Анимированный разделитель для секций на CSS

Добавить комментарий: