Hello,

I was trying to make an animated spoiler, but I failed misserably. The image which I'm trying to hide appears outside the spoiler. I have no idea why. Could I please gat some help because it is really annying

My code:

HTML:
Code:
<link rel="stylesheet" type="text/css" href="styles.css" />
<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
<img src="../../Pictures/45YiVH9wbOM.jpg" alt="45YiVH9wbOM" width="500" height="500" />
</div></div>
CSS:

Code:
<style type="text/css">
2
/* animated spoiler CSS by Bloggersentral.com */
3
.spoilerbutton {display:block;margin:5px 0;}
4
.spoiler {overflow:hidden;background: #f5f5f5;}
5
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
6
.spoilerbutton[value="Show"] + .spoiler > div {margin-top:-100%;}
7
.spoilerbutton[value="Hide"] + .spoiler {padding:5px;}
8
</style>