Assignments Of Class 19 - CSS Transitions
Assignment 1: Button Color Transition
Task: Create a button that changes its background color smoothly when hovered.
Steps:
1. HTML: Create a button.
html
CopyEdit
<button class="color-transition">Hover Me</button>
2. CSS: Add a transition to change the background color.
css
CopyEdit
.color-transition {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.5s ease;
}
.color-transition:hover {
background-color: #0056b3;
}
Explanation:
- The transition property creates a smooth change for the background-color over 0.5 seconds.
- On hover, the background changes from blue to dark blue (#0056b3).
Assignment 2: Text Color Transition
Task: Create a paragraph where the text color transitions when hovered.
Steps:
1. HTML: Add a paragraph.
html
CopyEdit
<p class="text-transition">Hover over this text to see the color change!</p>
2. CSS: Apply transition to color.
css
CopyEdit
.text-transition {
color: black;
font-size: 18px;
transition: color 0.4s ease-in-out;
}
.text-transition:hover {
color: red;
}
Explanation:
- The text smoothly transitions from black to red when hovered.
- The ease-in-out timing function creates a gradual start and end.
Assignment 3: Image Zoom Effect
Task: Create an image that zooms in slightly when hovered.
Steps:
1. HTML: Insert an image.
html
CopyEdit
<img src="example.jpg" class="image-zoom" alt="Zoom Effect" />
2. CSS: Use the transform property with scale.
css
CopyEdit
.image-zoom {
width: 300px;
height: auto;
transition: transform 0.3s ease;
}
.image-zoom:hover {
transform: scale(1.1);
}
Explanation:
- The transform: scale(1.1) enlarges the image slightly on hover.
- The transition ensures a smooth zoom effect over 0.3 seconds.
Assignment 4: Border Width Transition
Task: Create a box where the border width transitions smoothly.
Steps:
1. HTML: Create a div.
html
CopyEdit
<div class="border-transition">Hover Me</div>
2. CSS: Use transition on the border-width.
css
CopyEdit
.border-transition {
width: 200px;
height: 100px;
border: 2px solid black;
text-align: center;
line-height: 100px;
transition: border-width 0.5s ease;
}
.border-transition:hover {
border-width: 10px;
}
Explanation:
- On hover, the border-width transitions from 2px to 10px smoothly.
Assignment 5: Box Shadow Transition
Task: Add a hover effect where a shadow appears smoothly around a box.
Steps:
1. HTML: Create a div.
html
CopyEdit
<div class="shadow-transition">Hover for Shadow</div>
2. CSS: Use box-shadow.
css
CopyEdit
.shadow-transition {
width: 200px;
height: 100px;
background-color: lightgray;
transition: box-shadow 0.4s ease;
}
.shadow-transition:hover {
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}
Explanation:
- A smooth shadow effect appears on hover, adding depth to the box.
Assignment 6: Width Transition
Task: Create a div that expands its width on hover.
Steps:
1. HTML: Add a div.
html
CopyEdit
<div class="width-transition"></div>
2. CSS: Use transition with width.
css
CopyEdit
.width-transition {
width: 100px;
height: 50px;
background-color: green;
transition: width 0.6s ease;
}
.width-transition:hover {
width: 200px;
}
Explanation:
- The width property transitions from 100px to 200px smoothly over 0.6 seconds.
Assignment 7: Height Transition
Task: Create a button that increases its height on hover.
Steps:
1. HTML: Add a button.
html
CopyEdit
<button class="height-transition">Hover Me</button>
2. CSS: Use transition with height.
css
CopyEdit
.height-transition {
height: 40px;
width: 120px;
background-color: orange;
transition: height 0.4s ease-in-out;
}
.height-transition:hover {
height: 60px;
}
Explanation:
- The button's height smoothly increases from 40px to 60px.
Assignment 8: Background Image Transition
Task: Change the background image of a div on hover with a smooth transition.
Steps:
1. HTML: Create a div.
html
CopyEdit
<div class="background-transition"></div>
2. CSS: Use transition on background-image.
css
CopyEdit
.background-transition {
width: 300px;
height: 200px;
background-image: url('image1.jpg');
background-size: cover;
transition: background-image 0.8s ease;
}
.background-transition:hover {
background-image: url('image2.jpg');
}
Explanation:
- The background image transitions smoothly when hovered.
Assignment 9: Opacity Transition
Task: Fade out a box when hovered using opacity.
Steps:
1. HTML: Add a div.
html
CopyEdit
<div class="opacity-transition">Hover Me</div>
2. CSS: Use opacity.
css
CopyEdit
.opacity-transition {
width: 150px;
height: 100px;
background-color: purple;
color: white;
text-align: center;
line-height: 100px;
transition: opacity 0.5s ease;
}
.opacity-transition:hover {
opacity: 0.5;
}
Explanation:
- The opacity changes smoothly to 50% on hover.
Assignment 10: Multiple Properties Transition
Task: Animate both background color and text size simultaneously.
Steps:
1. HTML: Add a div.
html
CopyEdit
<div class="multi-transition">Hover Me</div>
2. CSS: Use multiple transitions.
css
CopyEdit
.multi-transition {
background-color: teal;
font-size: 16px;
padding: 20px;
color: white;
text-align: center;
transition: background-color 0.5s ease, font-size 0.3s ease;
}
.multi-transition:hover {
background-color: darkcyan;
font-size: 20px;
}
Explanation:
- The background-color and font-size change simultaneously but with different durations.
No comments:
Post a Comment