我想将 html 样式更改为 erb。
特别是链接到图像的标签。如果用户单击图像，我想在图像标签中显示图像的全尺寸。
我怎样才能做到这一点？erb不可能吗？请评论。
html
<li class="col-lg-3 design" data-id="id-0" data-type="web">
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Work 1" href="img/works/1.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<img src="img/works/1.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
css
.item-thumbs {
position: relative;
overflow: hidden;
margin-bottom: 30px;
cursor: pointer;
}
.item-thumbs a + img {
width: 100%;
}
.item-thumbs .hover-wrap {
position: absolute;
display: block;
width: 100%;
height: 100%;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 450ms ease-out 0s;
-moz-transition: all 450ms ease-out 0s;
-o-transition: all 450ms ease-out 0s;
transition: all 450ms ease-out 0s;
-webkit-transform: rotateY(180deg) scale(0.5,0.5);
-moz-transform: rotateY(180deg) scale(0.5,0.5);
-ms-transform: rotateY(180deg) scale(0.5,0.5);
-o-transform: rotateY(180deg) scale(0.5,0.5);
transform: rotateY(180deg) scale(0.5,0.5);
}
.item-thumbs:hover .hover-wrap,
.item-thumbs.active .hover-wrap {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: rotateY(0deg) scale(1,1);
-moz-transform: rotateY(0deg) scale(1,1);
-ms-transform: rotateY(0deg) scale(1,1);
-o-transform: rotateY(0deg) scale(1,1);
transform: rotateY(0deg) scale(1,1);
}
.item-thumbs .hover-wrap .overlay-img {
position: absolute;
width: 50%;
height: 100%;
opacity: 0.80;
filter: alpha(opacity=80);
background: #000;
}
.item-thumbs .hover-wrap .overlay-img-thumb {
position: absolute;
border-radius: 60px;
top: 50%;
left: 50%;
margin: -16px 0 0 -16px;
color: #fff;
font-size: 32px;
line-height: 1em;
opacity: 1;
filter: alpha(opacity=100);
}