Menu
<html>
<head>
<style type="text/css">
.a1:hover{
width:300;
height:400;
}
.a2{
width:90%;
height:400px;
float:right;
border:5px solid red;
}
</style>
</head>
<body>
<div class=a2></div>
<div><img src="image1.jpg" width=100 height=100 class=a1 ></div>
<div><img src="image2.jpg" width=100 height=100 class=a1></div>
<div><img src="image3.jpg" width=100 height=100 class=a1 ></div>
<div><img src="image3.jpg" width=100 height=100 class=a1></div>
</body>
</html>I have four images,each one in a separate div.When hovering over one image, I need it to open in a new div with larger size (Keeping the first image as is) and i want to display some text under the new image that appears after hovering. I've tried this but it seems that when hovering over the first image it got bigger but doesn't open in the targeted div. What can I do?
653
asked Dec 22 '25 13:12
You won't necessarily need Javascript for this. The code snippet below displays a larger version of the image when hovered while keeping the original image as is.
.a1:hover{
width:300;
height:400;
}
.small-image {
width: 100px;
height: auto;
}
.small-image:hover + .large-image {
visibility: visible;
}
.large-image {
visibility: hidden;
width: 200px;
height: auto;
}<html>
<head>
</head>
<body>
<div><img src="https://cdn1.iconfinder.com/data/icons/simple-icons/4096/stackoverflow-4096-black.png" class="small-image">
<img src="https://cdn1.iconfinder.com/data/icons/simple-icons/4096/stackoverflow-4096-black.png" class="large-image">
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
