Как установить border на картинки?

Question

Daniel_Defo @Daniel_Defo

HTML
CSS

Как установить border на картинки?

Добрый день господа, есть такая проблема, которую никак не могу решить.
У меня на фоне стоит 5 картинок с свойством clip-path при наведении на них должны появлятся скрытые элементы, но проблема не в этом, а в том что в макете есть рамка которую я не могу отобразить при данных условиях, так как border заданный position: absolute перекрывает картинки собой, в этом случае рамка есть, а навести на картинки не могу.Может кто знает решение данной проблемы?
Пример special.bose.eu/en

<div class="header">

					<div class="bg-1">

					</div>
					<div class="bg-2">

					</div>
					<div class="bg-3">

					</div>
					<div class="bg-4">

					</div>
					<div class="bg-5">

					</div>

				</div>

.header
	height: 100vh
	display: flex
	flex-wrap: nowrap
	flex-direction: row
	justify-content: space-between
	overflow: hidden
	position: relative


		
.bg-1
	margin: -20px
	background-image: url(../img/bg-1.jpg)
	background-repeat: no-repeat
	width: 100%
	background-size: cover
	-webkit-clip-path: polygon(0 0, 78% 0, 58% 100%, 0% 100%);
	clip-path: polygon(0 0, 78% 0, 58% 100%, 0% 100%);
	transition: all .5s ease
	&:hover
		width: 120%
		transform: scale(1.2)

.bg-2
	background-image: url(../img/bg-2.jpg)
	background-repeat: no-repeat
	background-position: left
	width: 100%
	background-size: cover
	-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
	clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
	margin-left: -400px			
	transition: all .5s ease
	&:hover
		// width: 140%
		// margin-left: -550px
		transform: scale(1.2)

.bg-3
	background-image: url(../img/bg-3.jpg)
	background-repeat: no-repeat
	width: 100%
	background-size: cover
	-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
	clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
	margin-left: -285px
	transition: all .5s ease
	&:hover
		// width: 140%
		// margin-left: -550px
		transform: scale(1.2)		

.bg-4
	background-image: url(../img/bg-4.jpg)
	background-repeat: no-repeat
	width: 100%
	background-size: cover
	-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
	clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
	margin-left: -285px	
	transition: all .5s ease
	&:hover
		// width: 140%
		// margin-left: -550px
		transform: scale(1.2)

.bg-5
	background-image: url(../img/bg-5.jpg)
	background-repeat: no-repeat
	width: 100%
	background-size: cover
	background-position: top
	-webkit-clip-path: polygon(55% 0, 100% 0%, 100% 100%, 36% 100%);
	clip-path: polygon(55% 0, 100% 0%, 100% 100%, 36% 100%);
	margin-left: -440px	
	transition: all .5s ease
	&:hover
		width: 110%
		// margin-left: -550px
		transform: scale(1.2)