html and css bootstrap

For the hover effect of image wrap the img tag in a div, within that div wrap the icon view in a div. <div class=" equil-image"><img class="img"><div class= "overlay"><img></div> </div>

in the css, give .equil-image a width of 100% and position: relative , give .img a width of 100% and display: block. give .overlay position: absolute, right, left, bottom, top, of 0 background-color of cyan and opacity of 0. Give img:hover .overlay opacity of 0.9 and a pointer value of cursor.

.equil-image{
width:100%;
position: relative;
}
.img{
width:100%;
height:100%;
}
.overlay{
position: absolute;
top:0;
left:0;
bottom: 0;
right: 0;
background-color: hsl();
opacity: 0;
}
.img:hover .overlay{
opacity:0.9;
cursor: pointer;
}

To center .icon on the image.:

.overlay img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Hope am helpful.

Well done for completing this challenge. HAPPY CODING