I'm attempting to replicate this design in my project: http://jsfiddle.net/AYRh6/26/ However, I am facing issues with it and cannot pinpoint the exact problem in the code. I am using code for a toggle effect.
Any assistance would be greatly appreciated.
Link to my issue: http://jsfiddle.net/Gr8sw/
Here is my HTML:
<div id="category">
<section id="pushOne" class="slidebox">
<div class="toggle>
<a class="bot" href="#"><img src="01.png" alt="Category 1"/></a>
<a class="top" href="#pushOne"><img src="01.png" alt="Category 1"/></a>
</div>
<div class="box"><h2>Category 1</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis aliquet odio, dictum hendrerit metus egestas non. Ut quis est tellus. Duis luctus elit nec arcu bibendum lacinia. Quisque luctus orci lorem, sit amet consequat enim mollis quis. Nullam dui magna, aliquam non venenatis et, lobortis eget felis.
</div>
</section>
</div>
And here is my CSS:
.toggle {
height:230px;
width:230px;
position:relative;
z-index:2;
background:#CECECE;
}
.toggle:hover, .toggle.clicked {background:#F05A24;}
.orange {background#F05A24;}
.toggle img {width:100%;}
#pushOne img {padding-top:20px;}
.toggle a { position: absolute; padding:40px;}
.box {
overflow:hidden;
display:hidden;
opacity:0;
transition: all .4s ease-out;
margin-top:0px;
margin-bottom:20px;
width:230px;
}
.slidebox:target .box {
min-height:100px;
opacity:1;
}
.slidebox {float:left; margin:0 50px 0 0; transition: all 0.2s ease;}
.slidebox:target .top { opacity:0; pointer-events: none;}
#category {margin:0 auto;width:80%;}
Javascript:
$(".toggle").click(function () {
$(this).toggleClass(".clicked");
});</script>
There's something elusive that my eyes are missing :(