求点击【查看大图】后图片右边能出现文字的HTML/CSS代码

Question

上面这个是我已经实现了的效果

——————————————————————————————————————————————
现在想要实现的效果是大图的右边可以有文字描述
类似于新浪微博“查看大图”的效果

—————————————————————————————————————————————

另外贴一下现在的代码。

CSS文件：

.single-image,
.video {
position: relative;
display: block;
cursor: pointer;
}

.curtain {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
text-indent: -9999px;
opacity: 0;
filter: alpha(opacity = 0);
}

.light .curtain {background: rgba(255, 255, 255, .3);}
.dark .curtain {background: rgba(0, 0, 0, .4);}

.ie8 .light .curtain {background: rgb(255,255,255);}
.ie8 .dark .curtain {background: rgb(0,0,0);}

.curtain:before {
position: absolute;
top: 50%;
left: 50%;
display: block;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
content: "";
}

.picture-icon .curtain:before {background: url(../images/zoom.png) no-repeat scroll 0 0 transparent;}
.video-icon .curtain:before {background: url(../images/video-icon.png) no-repeat scroll 0 0 transparent;}

.single-image:hover .curtain,
.video:hover .curtain {
filter: alpha(opacity=40);
opacity: 1;
}

#portfolio-items article:hover img {
filter: alpha(opacity=100);
opacity: 1;
}

#portfolio-items article:hover .title-item {color: #a6412b;}

网页源代码：
<article class="one-half" data-categories="travelling">

<a href="images/fullscreen/big-img-2.jpg" class="single-image picture-icon" rel="group_portfolio">
<img src="images/portfolio/thumb-2nd-2.jpg" alt="">
</a>

</article>

——————————————————————————————————————————————

初学，请大神们轻拍。急求！！！拜谢！！！

Answer 1

你这个现实文字，需要跟图片对应~~~例如：给每段文字加class:word_01 ,word_o2,word_03……然后展示图片的时候 根据index判断，现实相对应的那段文字。可以用jQuery实现。
如果还是没有明白，把html代码打包给我，帮你调试！