Image Hover Effects

.main_box {
	position: relative;
	width: 300px;     /* Change width to 100% if parent column is less then 33% width of screen */
	overflow: hidden;
	cursor: pointer;
	margin: auto;
}

.image_box {
	width: 100%;
	height: auto;
}

.image_box img {
	width: 100%;
	height: auto;
}

.text_box {
	height: 100%;
	width: 100%;
	place-items: center;
	position: absolute;
	top: 0;
	display: none;
	transition:.5s;
}

.text_box p {
	color: #fff;
	font-family: inherit;
	font-size: 18px;
}



/* hover */

.main_box:hover .text_box {
	display: grid;
}

.main_box:hover .image_box::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: #f00; /* Hover background color can be changed here */
    left: 0;
    mix-blend-mode: multiply; /* Hover background effect can be changed here */
}