ednacoyote
New Member
i am having some trouble configuring my javascript with my css so that when an image is clicked a little caption bar will appear with icons in it. Currently when i hover over the image the caption bar appears but i want to change this so that it will be usable for users on tablets where they have to touch and don't have the hover feature. View page\[code\]<figure> <img width="158" height="158" alt="Gravatar" data-bind="attr:{src: GravatarUrl}" /> <figcaption> <a title="Email" id="emailIcon" class="icon-envelope icon-white" data-bind="attr:{'href':'mailto:' + Email()}"></a> <a title="Profile" id="profileIcon" class="icon-user icon-white"></a> </figcaption></figure>\[/code\]CSS\[code\]figure, figcaption { display: block;} figure { position:relative; float:left; margin:20px; width:158px; height:158px; border:1px solid #333; overflow:hidden; background: #fff; padding: 1px;} figure figcaption { position:absolute; bottom:0; left:0; opacity: .75; margin-bottom:-115px; -webkit-transition: margin-bottom; -webkit-transition-duration: 400ms; -webkit-transition-timing-function: ease-out; -moz-transition-property: margin-bottom; -moz-transition-duration: 400ms; -moz-transition-timing-function: ease-out; -o-transition-property: margin-bottom; -o-transition-duration: 400ms;} figure.open figcaption { margin-bottom:0px;} figcaption { width:160px; height:25px; background:#111; color:#fff; font-family: Arial, Helvetica, sans-serif;}\[/code\]Javascript Not sure if there is a way to do it with just css or not.\[code\]$('figure').on('click', function (event) { $(event.currentTarget).toggleClass('open'); });\[/code\]