CODEWITHSUNDEEP
htmlcssruby-on-railsrubyimage
AnthonyGalli.com
AnthonyGalli.com

Reputation: 2866

How to show foreground image and then hide on hover?

How to show an image in the foreground and then upon a user hovering over that image the image would go away and the user can see what was behind it.

I tried combinations of display: none and visibility: none, but then the image wouldn't hover or not show completely

view

<div class="social-stuff">
  <div class="like-button">
    <%= link_to like_challenge_path(:id => @challenge.id), class: "btn", method: :post do %>
      <span class='glyphicon glyphicon-thumbs-up'></span> Like
    <% end %>
  </div>

  <div class="text-background">
    <%= render "comments/comments" %>
    <%= render "comments/form" %>
  </div>
</div>

css

.social-stuff {
  background: url('goal-setting.jpeg');
  &:hover {
   ??
  }
}

Upvotes: 2

Views: 1694

Answers (1)

RuNpiXelruN
RuNpiXelruN

Reputation: 1920

I've created a CodePen here for you. I've done it in two ways. Using CSS to change the image's opacity on hover and also using jQuery to animate the opacity of the image. Below is the code. It's setup to work using jQuery at the moment, but un-comment the css hover section out, and comment the jQuery, and the CSS version will work. Hope this helps.

HTML

<div class="image-container">
  <img id="image-foreground" src="https://cdn2.vox-cdn.com/thumbor/CA1U4gMJ2xG2s-tSfPTKJdiVFxw=/0x0:1687x1125/1280x854/cdn0.vox-cdn.com/uploads/chorus_image/image/48681987/titan-aerospace-drone-google.0.0.jpeg" alt="" />
  <div class="text-wrapper">
    <p id="text-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam delectus, optio qui, magni suscipit error aperiam nemo veritatis quod sunt at perferendis accusantium quaerat. Repudiandae quaerat inventore voluptatum, sit eos.</p>
  </div>
</div>

CSS

.image-container {
  background: black;
  position: relative;
  height: auto;
  width: 30vw;

  #image-foreground {
    position: absolute;
    height: inherit;
    width: inherit;
    z-index: 2;
    opacity: 1;

    // &:hover {
    //   opacity: 0;
    // }
  }
  .text-wrapper {
    position: absolute;
    width: 20vw;
    color: white;
    top: 15vh;
    left: 5vw;
    z-index: 1;
    background: black;
  }
}

jQuery

$(document).ready(function(){
  $('#image-foreground').hover(function(){
    $(this).animate({
      opacity: 0
    },500, function(){
      $(this).animate({
        opacity: 1
      },500)
    });
  });
})

Upvotes: 3

Related Questions