picture_style.css

/* 
    This file is for the style and effects on the picture.
*/

/*
    img
    the location of the image on the page
*/
img {
	margin-left: 5%;
	float: left; width: 21%; height: 14%;
}

/*
    .photo
    more positioning and display settings
*/
.photo {
	position: absolute;
	top: 15%;
	left: 20%;
	transform: translate(-50%, 50%);
	display: block;
}

/*
    .photo img
    size, location, and color modification on the image
*/
.photo img {
	width: 200px;
	height: 280px;
	object-fit: cover;
	filter: grayscale(70%) contrast(120%);
	box-shadow: 10px 15px 25px 0 rgba(0,0,0,.2);
	display: block;
	transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
	margin-top: -10px;
}

/*
    Moves image shadow when hovered over
*/
.photo:hover img {
	box-shadow: 1px 1px 10px 0 rgba(0,0,0,.1);
	filter: grayscale(10%) contrast(120%);
}

.photo .glow-wrap {
	overflow:hidden;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	margin-top: -10px;
}

.photo .glow{
	display: block;
	position:absolute;
	width: 40%;
	height: 200%;
	background: rgba(255,255,255,.2);
	top: 0;
	filter: blur(5px);
	transform: rotate(45deg) translate(-450%, 0);
	transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

.photo:hover img,
.photo:hover .glow-wrap{
	margin-top: 0;
}