Q:

How to transform image size on mouse hover without affecting the layout in CSS

mhmadesk
Save to bookmark
|
2022-05-17
|
  795 
Very Easy
0

How to transform image size on mouse hover without affecting the layout in CSS

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the CSS transform property

You can use the CSS transform property to increase or decrease the image size on mouse hover without affecting the surrounding elements or content.

Let's try out the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Image Transform Gallery</title>
<style>
    ul {
		padding: 0;
        margin: 50px 20px;
        list-style: none;
    }
    ul li {
        margin: 5px;
        display: inline-block;
    }
    ul li a {
        padding: 5px;
        display: inline-block;      
        border: 1px solid #f2f2f2;
    }
    ul li a img {
        width: 125px;
        height: 125px;
        display: block;
    }
    ul li a:hover img {
        transform: scale(1.5);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
</style>
</head>
<body>
    <ul>
        <li><a href="#"><img src="/examples/images/club.jpg" alt="Club Card"></a></li>
        <li><a href="#"><img src="/examples/images/diamond.jpg" alt="Diamond Card"></a></li>
        <li><a href="#"><img src="/examples/images/spade.jpg" alt="Spade Card"></a></li>
        <li><a href="#"><img src="/examples/images/heart.jpg" alt="Heart Card"></a></li>
    </ul>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now