Hello, I\'m having a little trouble with CSS: Directions: Transition Styles In t
ID: 3910967 • Letter: H
Question
Hello,
I'm having a little trouble with CSS:
Directions:
Transition Styles
In the ba_animate.css file in your editor. Jason wants you to create a transition effect for the navigation list in which a semicircle grows behind each link when it is hovered over. Within the Transition Styles section, add a style rule for the nav a selector that:
1. displays the background image file ba_target.pngcentered horizontally and vertically with no tiling,
2. set the size of the background image to 0%,
3. set the hypertext font color to rgb(253, 240, 133), and
4 add a transition that changes the background size over 0.3 seconds and the font color over 0.8 seconds.
5. Create a style rule for the nav a:hover selector to set the background size to 100% and the font color to rgb(244, 130, 130).
Here's what I have so far:
/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 8
Case Problem 2
Big Apple Physics Animation Styles
Author:
Date:
Filename: ba_animate.css
*/
/* Transition Styles */
nav a {
}
nav a:hover {
}
Explanation / Answer
If you have any doubts, please give me comment....
/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 8
Case Problem 2
Big Apple Physics Animation Styles
Author:
Date:
Filename: ba_animate.css
*/
/* Transition Styles */
nav a {
background: url('ba_target.png') no-repeat center;
background-size: 0%;
color: rgb(253, 240, 133);
transition: background 0.3s color 0.6s;
-moz-transition: background 0.3s color 0.6s;
-webkit-transition: background 0.3s color 0.6s;
}
nav a:hover {
background-size: 100%;
color: rgb(244, 130, 130);
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.