I have in style made a div ID container with autosize. But wwhen I add that to the images they change size and position. I have sat the images to 15% in size, but they get much smaller !
How do I avoid that?
Try:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.container {
border: 1px so;
id #CCC;
width: 15%;
display: inline-block;
overflow: hidden;
}
img:hover {
transform: scale(2);
transition: 2s ease;
}
img {
transition: 1s ease-out;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<img src="https://picsum.photos/200"></img>
</div>
<div class="container">
<img src="https://picsum.photos/200">
</div>
<div class="container">
<img src="https://picsum.photos/200">
</div>
<div class="container">
<img src="https://picsum.photos/200">
</div>
</body>
</html>
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices