CODEWITHSUNDEEP
javascriptcss
Yoligrana
Yoligrana

Reputation: 43

Display image when mouse over image

I have a small icon set as

<a class="snapchat" style="margin: 5px 5px 0 -2px;" 
 target="_blank" href="#"><img src="theimage" />
 </a>

I need to display a div below with an image when user mouse over the icon. I tried by adding a hover class to the icon:

a.snapchat:hover {
    width:200px;
    height:200px;
    background-image: url("hover-image");
    position:relative;
    top:60px;
}

but it does not work as expected. Is there a solution to get this?

Fiddle : https://jsfiddle.net/tkux5uav/

Upvotes: 0

Views: 16560

Answers (4)

nOs
nOs

Reputation: 24

Starting from your approach, the easiest implementation would be to have no img src but two background images in css, one for each state (hover or not).

Html

<div class="snapchat"><a style="margin: 5px 5px 0 -2px;" target="_blank" href="#">  </a></div>

Css

.snapchat{width:300px;height:300px;display:block;background-image: url("image1")}
    
    .snapchat:hover{width:100%;height:100%;background-image: url("image2");
    position:absolute;
    top:60px;}

Upvotes: 0

Chris
Chris

Reputation: 59511

You can do this by setting opacity: 0 and a negative top property on the img. When you then hover you change these properties to opacity: 1 and a positive top property. This along with the transition will make the changes appear as animations.

To do this, you also have to "abstract" the img from the a so that it can move and hide independently and without affecting it's parent. Do this by setting the parent anchor to position: absolute and then the child image to position: relative.

There might be better ways you can accomplish this, but I only edited the css. I left your markup untouched.

Modifications after comment:

Example Fiddle

a.snapchat {
  position: relative;
  background: lightgrey;
}

a.snapchat img {
  position: absolute;
  opacity: 0;
  width: 100px;
  height: 100px;
  left: 0;
  top: -20px;
  transition: opacity .5s, top .5s;
}

a.snapchat:hover img {
  opacity: 1;
  top: 20px;
}
<a class="snapchat" style="margin: 5px 5px 0 -2px;" target="_blank" href="#">Hover for effect<img src="http://i.utdstc.com/icons/256/snapchat-android.png" /></a>

Upvotes: 2

Rokin
Rokin

Reputation: 2137

If you give an id to the div with the image (for example id="imageDiv"), you can manipulate it with CSS like this:

#imageDiv {display: none;}
a.snapchat:hover #imageDiv {display: block;}

Upvotes: 1

Husni Salax
Husni Salax

Reputation: 2020

Here we go:

<img id="Image"/>
    <script>
        $(document).ready(function(){
            $("#Image").mouseover(function(){
                $("#Image").show();
            });
            $("#Image").mouseout(function(){
                $("#Image").hide();
            });
        });
        </script>

Hope it helps;)

Upvotes: 0

Related Questions