Zoom on hover
To implement a zoom effect on hover using CSS, you can use the transform property with the scale function.<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Zoom on Hover</title>
</head>
<body>
<div class=”zoom-on-hover”>
<img src=”image.png” alt=”Zoomable Image”>
</div>
</body>
</html>.zoom-on-hover {
transition: transform 0.3s ease;
}
.zoom-on-hover:hover {
transform: scale(1.2);
}
Overlay slide
To create an overlay slide effect with CSS, you can use absolute positioning along with transition effects.<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Zoom on Hover</title>
</head>
<body>
<div class=”container”>
<img src=”image.jpg” alt=”Image”>
<div class=”overlay”></div>
</div>
</body>
</html>.container {
position: relative;
width: 300px; /* Adjust this according to your image size */
}
img {
width: 100%;
height: auto;
}
.overlay {
opacity: 0;
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
transition: left 0.3s ease;
}
.container:hover .overlay {
left: 0;
opacity: 1;
}
Center an item horizontally and vertically
You can use display: grid; and place-items: center; to center an element horizontally and vertically.<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Center an element</title>
</head>
<body>
<div class=”container”>
<img src=”image.jpg” alt=”Image”>
</div>
</body>
</html>.container{
display: grid;
place-items: center;
height: 500px;
border: 2px solid;
}
Create a gradient background
This snippet creates a gradient background that transitions smoothly from one color to another, horizontally from left to right.<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Gradient background</title>
</head>
<body>
<div class=”container”>
</div>
</body>
</html>.container{
background: linear-gradient(to right, #ff7e5f, #feb47b); /* Change colors as needed */
height: 500px; /*Height for testing purpose*/
}
Styling links
This snippet provides basic styling for hyperlinks, removing the default underline and changing the color on hover.<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Styling links</title>
</head>
<body>
<a href=”#”>This is a link</a>
</body>
</html>a {
text-decoration: none;
color: #007bff; /* or any other color */
}
a:hover {
text-decoration: underline;
}