<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Movie website</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="product">
        <div class="product-small-img">
            <img src="https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="product image" onclick="myFunction(this)">
            <img src="https://images.pexels.com/photos/2529147/pexels-photo-2529147.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="product image" onclick="myFunction(this)">
            <img src="https://images.pexels.com/photos/2529146/pexels-photo-2529146.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="product image" onclick="myFunction(this)">
            <img src="https://images.pexels.com/photos/2048547/pexels-photo-2048547.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="product image" onclick="myFunction(this)">
        </div>

        <div class="img-container">
            <img id="imageBox" src="https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="product image">
        </div>
    </div>
</body>
</html>
*
{
	margin: 0;
	padding: 0;
}

.product-small-img img
{
	height: 92px;
	margin: 10px 0;
	cursor: pointer;
	display: block;
	opacity: .6;
}

.product-small-img img:hover
{
	opacity: 1;
}

.product-small-img
{
	float: left;
}

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

.img-container img
{
	height: 400px;
}

.img-container
{
	float: right;
	padding: 10px;
}
function myFunction(smallImg)
{
    var fullImg = document.getElementById("imageBox");
    fullImg.src = smallImg.src;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.