<a href="#">
	<figure><img src="https://www.ameamelog.com/wp/wp-content/uploads/2019/08/css-scale_dummy.jpg" alt=""></figure>
</a>
a {
  width: 400px;
  display: block;
}
figure {
  margin: 0;
	overflow: hidden;
  position: relative;
}
figure::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	transition: .3s;
}
figure img {
	transition: .3s;
}
a:hover figure::before {
	background: rgba(0,0,0,.5);
}
a:hover figure img {
	transform: scale(1.05);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.