#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    1
    Rep Power
    0

    ***HELP ME PLEASE!!! How can I add an image hover to a thumbnail?***


    Hi there!

    I just joined this forum in order to get some help (quickly if possible!) to my reasonably small problem. I really hope this forum and community WILL help me, because I don't get any help anywhere else.

    So... I have this website made with the SQUARESPACE platform and I have made a grid gallery in the page. It's a code block, which I can enter from the layout editor on to the page. Every code block has a unique ID (block-id) and I can enter custom css into the website by referring to the element (for example the block-id). My problem is that I have not fiqured out what is the element I have to refer to in order to achieve this hovering effect when placing the mouse cursor on top of the thumbnail image. My deadline is breathing my neck on this, so I hope someone could be so kind and help FAST!

    To get a better idea what I am trying to achieve, please go the following website where the grid gallery is displayed.
    ".kauniitkodit.fi/nayteikkuna."

    --> the first image on the top left represents the effect I need to have when hovering the other images. An image pops on top the thumbnail. Pretty simple I know. But I don't get it to work. I can get something done but it goes underneath the thumbnail. Weird...

    I AM BEGGING YOU GUYS!! HELP ME!!
    Last edited by Albezar; March 18th, 2013 at 08:57 AM. Reason: I'm not getting help.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    For others, here's a link to the page in question: http://www.kauniitkodit.fi/nayteikkuna

    Welcome to DevShed Forums, Albezar.

    I can get something done but it goes underneath the thumbnail. Weird...
    I suspect the issue may be because the <img> elements have "position:relative". Please put in the code that adds the hover affect, so we can see it in action.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo