how to show the full size image when user click the thumbnail image in erb?

Question

I want to change html style to erb.

specially, a tag which link to image. I want to, if user click to image, show the full-size of image in image tag.

How can I do that? Is it impossible in erb? please comment.

---

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);
}

Answer 1

I changed it as blow. use image_path

  <li class="item-thumbs col-lg-3 design" data-id="id-0" data-type="web">
    <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Work 1" href= <%= image_path("moderna/works/1.jpg") %>>
      <span class="overlay-img"></span>
      <span class="overlay-img-thumb font-icon-plus"></span>
    </a>
    <%= image_tag("moderna/works/1.jpg", class: "img-responsive", alt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis." )%>
  </li>