HTML and CSS Help

[MartyTheMilkman]

Hi, so im looking to make a image scroll on hover to show a preview of a webpage. This page is a good example of this https://nycwebdev.io/ . Mine is just a popout image that needs to scroll. I will attach the HTML and CSS to this post. and here is whats currently happening with my code. https://gph.is/g/4L3YoqP I've looked around a lot and cant find a good answer. Thanks in advanced for the help.

<div class="col">
	<a href="http://www.sekisuiplasticsusa.com">
	<div class="card">
		<img id="cardimg" src="Manufacturing images\Sekisuibig.PNG" alt="Avatar" style="width:100%;">
		<div class="large">
			<img src="Manufacturing images\Sekisuibig.PNG" class="large-image" alt="Avatar" style="width:250px; height: 250px;">
		</div>
		<div class="cardtext">
			<h6>Sekisui Kasei USA</h6>
		</div>
	</div>
	</a>
</div>

.large {
	position: absolute;
	left: -9999px;
	z-index: 1000;
	background-repeat: no-repeat;
	overflow:hidden;
}

a:hover .large {
	left: 20px;
	top: -150px;
	border-radius: 4px;
	box-shadow: 1px 1px 3px 3px rgba(127, 127, 127, 0.15);
}

a:hover .large-image {
	transform: translate(0, -25%);
}

.large-image {
	transition: all .3s ease-out;
	margin-left: 0px;
	object-fit: none;
	margin-top: 0;
	object-position: 50% 0%;
}

 

[duncannah]

I think you want

position: relative;

for .card

[mariushm]

.. and you want to use / in file paths