rails way to mouseover or hover and then mouseout back to post.image

Question

I was having trouble figuring out what is the rails way to loop through my @posts, and have my link_to used to have a mouseover or hover of a green background-color with a font awesome icon, then on mouseout have it go back to my post.image

*on mouseover -background turns green with font awesome icon

*on mouseout - back to normal with post.image showing

<!-- Portfolio Grid Section -->
        <section id="portfolio">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h2>Portfolio</h2>
                        <hr class="star-primary">
                    </div>
                </div>
                <div class="row col-md-8 col-md-offset-2">
                    <% @posts.each do |post| %> 
                        <div class="col-sm-4 portfolio-item">
                            <%= link_to image_tag( post.image, class: "img-circle", size: "200x200"), post_path(post)  %>
                        </div>
                    <% end %>
                </div>
            </div>
        </section>

Answer 1

Based on your further comments I'm guessing you want an overlay on top of the image rather than to replace the image on hover.

To do this, create an absolute positioned span/div under the image and within the link. Set the spans opacity to 0 and then on link hover set it to 1. The trick is to use the CSS transition property to make it look like a smooth transition by changing opacity and background color over the period of 0.5 seconds.

I haven't tested the code below get you on track.

Rails/HTML:

<div class="col-sm-4">
  <%= link_to post_path(post), class: "post-item" do %>
    <%= image_tag( post.image, class: "img-fluid") %>
    <span class="overlay"><i class="fa fa-check"></i></span>
  <% end %>
</div>

CSS

.post-item{
  display:block;
  position:relative;
}
.post-item span{
  overlay: 0;
  position:absolute;
  display:block;
  transition: all 0.5s ease;
  background-color: transparent;
}
.post-item:hover span{
  opacity: 1;
  background-color: green;
}