Mobile-first solution using Flexbox

@tbrownlee I'm glad this was useful for you🌹👍. you can read more about pseudo elements from Here.

• Yes, you can change the icon size by using background-size property.

.interactive::after {
    background-size: 55px; /* you can use percentage % as well */
}

You can read more about it from Here.

Keep Coding🚀

Hello @tbrownlee, you did Good job. and Your solution is Also Responsive.👍👏 it seems quite small to me but its ok.

I have some notes for you:

• inside .interactive div instead of using .interactive-overlay and .interactive-icon. You can use pseudo element instead Your way is totally right but you can try the following:

.interactive::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;
}

.interactive:hover::after{
	opacity: 1;
}

• 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

• 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🚀