CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JoseBazBaz
JoseBazBaz

Reputation: 1445

MouseOver Image Effect

I am new to Javascript and JQuery.

I tried googling about this but could not describe the correct phenomenon accurately so Google gave me results that I wasn't looking for.

In sites like Pinterest, how do they create a mouseover image effect - i.e. the Repin/Like/Comment menu within the image.

Is this fairly easy to do - I just need one box inside the image?

Can you point me towards the correct direction or if it is really simple solve this for me?

Thank you.

Upvotes: 0

Views: 1062

Answers (4)

aug
aug

Reputation: 11714

I did a decent amount of digging for Pinterest to see how exactly they do it and it was pretty hard because they minified all their css files but this is actually all done with simple CSS3 hover. Here's what I found:

Here is a typical pin on Pinterest (specifically a repin)

<a class="Button Button11 WhiteButton ContrastButton repin_link" data-componenttype="MODAL_REPIN" data-id="176555247863760400" href="/pin/176555247863760400/repin/" wotsearchprocessed="true">
    <em></em><span>Repin</span>
</a>

Here is the CSS for the repin, like, and comment button

.actions.likebutton,
.actions.comment,
.actions.repin_link,
.actions.editbutton,
.actions.unlikebutton {
   display: none
}.pin: hover.actions.likebutton,
 .pin: hover.actions.comment,
 .pin: hover.actions.repin_link,
 .pin: hover.actions.editbutton,
 .pin: hover.actions.unlikebutton {
   display: block
 }

Basically when a pin is not being hovered over, they set the display to none, and then when the user is hovering over it, the css displays it as block. Actually if you inspect element, you can see all the buttons but they just aren't displayed on the screen until you hover. The linking to other sites is, of course, simply done through an a href which sends the user to another link. Hope this helps.

Upvotes: 2

Talha Akbar
Talha Akbar

Reputation: 10030

Fiddle

<div class="box"> <img src="myimage"> <div class="options"> <div class="button"> Like </div> <div class="button"> Repin </div> </div> </div>

Upvotes: 0

ATOzTOA
ATOzTOA

Reputation: 35940

You can use a button in place of the image and place the actual img tag inside the button. Then add other elements like divs inside the button. Now, you can selectively hide and show the divs on mouse over using javascript/jquery.

Upvotes: 0

Paul T. Rawkeen
Paul T. Rawkeen

Reputation: 4114

Fairly easy to implement:

HTML

<div class="gallery-item">

    <a href="#">
      <img alt="" src="image.jpg" />
    </a>

    <div class="gallery-item-like"> <!-- class `gallery-item-like` is `display:none;` by default -->
      <a href="#" class="button-like">
        <img src="icon.png" width="20" height="20" title="iLike" />
      </a>
    </div>

</div>

JS

$('.gallery-item').hover(
       function(){
           $(this).find(".gallery-item-like")
            .fadeIn("fast");
       },
       function(){
           $(this).find(".gallery-item-like")
            .fadeOut("fast");
     }
);

CSS

.gallery-item-like {
    display: none;
    font-size: 10pt;
    position: relative;

    top: 15px;
    left: 15px;
}

Upvotes: 0

Related Questions