How can I make a moving image appear after selecting a radio button using HTML/CSS?
I have attempted to achieve this with the code below, but the image always remains visible. I would like it to only be exposed once a selection is made. For instance, if I choose the phone radio button, a small phone image should slide in from the left side of the screen.
#rdiv {
margin: 50px;
}
#fradio {
margin: 15px 10px 20px 180px;
font-family: fantasy;
color: chartreuse;
}
#sradio {
margin: 5px 10px 20px 180px;
font-family: fantasy;
color: chartreuse;
}
@keyframes color-me-in {
0% {
background: orange;
}
/* Adding a step in the middle */
50% {
background: blue;
}
100% {
background: black;
}
}
#fsale {
vertical-align: middle;
color: aqua;
position: relative;
top: 70%;
font-size: 3.5em;
-webkit-animation-name: example;
/* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s;
/* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@-webkit-keyframes example {
0% {
color: red;
left: 0px;
top: 0px;
}
25% {
color: yellow;
top: 200px;
}
50% {
color: blue;
top: 100px;
left: 200px;
}
75% {
color: green;
left: 400px;
top: 200px;
}
100% {
color: red;
left: 600px;
top: 100px;
}
}
#image1 {
background-image: url(https://hikaricosmetics.com/wp-content/uploads/2014/07/Cabernet-lips-565x565.png);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>External Styles</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>
<div id="rdiv">
<label id="fradio">
<input type="radio" name="editList" value="never" />phone
</label>
<div id="image1"></div>
<label id="sradio">
<input type="radio" name="editList" value="costChange" />headphones
</label>
</div>
<p id="fsale">This image should appear upon selecting a radio button</p>
</body>
</html>