Modify the following HTML code to use five pictures and set the transition-durat
ID: 3751148 • Letter: M
Question
Modify the following HTML code to use five pictures and set the transition-duration to 3s and set the transition-timing-function to linear. It might be interesting to use five images of a landscape or something over five periods of time.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Melting Images</title>
<style type = "text/css">
#cover
{
position: relative;
margin: 0 auto;
}
#cover img
{
position: absolute;
left: 0;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
#cover img.top:hover
{
opacity: 0;
}
</style>
</head>
<body>
<div id = "cover">
<img class = "bottom" src="jhtp.png" alt = "Java 9e cover">
<img class = "top" src="jhtp8.png" alt = "Java 8e cover">
</div>
</body>
</html>
Explanation / Answer
Added the required function and also added image please make sure you replace the name of image 3.png 4.png and 5.png with the name of actual image that you have .
Please do let me me know if u have any concern...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Melting Images</title>
<style type="text/css">
#cover {
position: relative;
margin: 0 auto;
}
#cover img {
position: absolute;
left: 0;
/* */
-webkit-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
/* transition image function set to linear */
transition-timing-function: linear;
}
#cover img.top:hover {
opacity: 0;
}
</style>
</head>
<body>
<div id="cover">
<img class="bottom" src="jhtp.png" alt="Java 9e cover" />
<img class="top" src="jhtp8.png" alt="Java 8e cover" />
<img class="top" src="3.png" alt="Java 5e cover" />
<img class="top" src="4.png" alt="Java 6e cover" />
<img class="top" src="5.png" alt="Java 7e cover" />
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.