responsive landing page using CSS Flex

Hi Moruf!

There might be a more effective way to do the hover effect, but this is how I did it:

I created a <div> the exact same size as the image, with a background-color of the bright cyan color listed in the style guide, and placed it over the image.

I used position: absolute; to place the eye icon in the middle of said <div>.

I then set the opacity of both the div and the icon to 0, so that they don't normally appear.

I changed the opacity to 0.5 for div:hover and to 1 for icon:hover.

I hope this helps in any way!

Hello @MorufLawal, congratulation on submitting your first solution🎉👏.

I have some notes for you:

• for the hover effect, put the image with .eqn class inside div with .image-wrapper class for example and follow these styles:

.image-wrapper::after{
	content: url(./images/icon-view.svg);
	position: absolute;
	background-color: rgb(0 255 247 / 45%);
	width: 100%;
	height: 100%;
	opacity: 0;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 1rem;
	overflow: hidden;
	transition: .3s ease;
}

.image-wrapper:hover::after {
    opacity : 1;
}

i used div to wrap the image and do the hover effect since <img> alone doesn't work with ::after pseudo element.

• instead of using <hr> tag you can use border-top or border-bottom depending on the div you will use it. Also this is more Semantic

• for .Bottom give it text-align: start to be like the design also give space between the avater image and the text.

• use <a> element instead of span for author name. It's more Semantic and on click this name this may lead to another page.

• you can see My solution for this challenge it may be helpful for you..!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀