No announcement yet.

Mouse over image to show div and text

  • Filter
  • Time
  • Show
Clear All
new posts

  • Mouse over image to show div and text

    I'd like someone to explain this to me in simple terms. I think I know how it works in theory, but can't find tutorials on what I want (although i'm sure it's somewhere) so i'm resorting to posting this topic.

    I have an image thumbnail that links to a page. One of many.

    When you mouse over, it changes straight away with nothing fancy.

    A solid colour with lowered opacity is shown (so the thumbnail is partly visible).

    Text is also shown, which include titles.

    Examples (second one has smooth transitions, not needed):

    I want to keep this as simple as possible. My understanding is on hover, a div is displayed over the image in the same spot, with block attributes (making the whole box a link), text and opacity set to 50-75%.

    So based on that, do I give the thumbnail its own class? i.e.

    .class:hover { styles }

    How and where do I fit the text in? Do you make the text invisible in it's normal state, then visible in it's hover state? How would you make only the text invisible or hidden? I can't change it's colour to match the background because it's on an image..

    (i've done this without images successfully)

  • #2
    I think this is what you're looking to do?

    never tried it on my own tho.

    I an NO genius when it comes to web design, but looking at his code, it looks like the 2nd link you provided, did it with css. The 1st link you provided looks like she created it from a template, and it's kinda messy.
    Last edited by Ang; 01-22-2012, 03:08 PM.
    Typos are very important to all written form. It gives the reader something to look for so they aren't distracted by the total lack of content in your writing.
    - Randy K. Milholland


    • #3

      i think this is probably what you're looking for.


      • #4
        Yes it is, however it is done with JQuery and I am aiming to do it with only CSS and HTML.

        I have gone through that page and didn't think it would work, but then I realised I could set the background colour to whatever I wanted, then change opacity to have the coloured overlay. So i'll give that a play around.


        • #5
          Are you not in danger of limiting functionality for IE users doing it through CSS. I'd imagine you'll be looking to use some CSS3, so if the detail that is displayed on mouseover is important then you could have some issues with usability


          • #6
            That is true, I'm currently looking into an playing with RGBa for background opacity. It's working properly so i'm going to make it into a link now.

            On IE it doesnt display properly as well as older browsers, but there is a fallback which is solid colour instead of transparent colour, not a big deal to be honest. I'm happy to play around with this for a bit.

            However, it does involve using position:relative to move the div over the image, also not a big deal. If it ends up being too tricky or messy then i'll resort to js but that would mean learning it from scratch.

            Edit: the fallback method isn't working for IE at the moment..


            • #7
              Originally posted by Dr.McNinja View Post
              If it ends up being too tricky or messy then i'll resort to js but that would mean learning it from scratch.

              Edit: the fallback method isn't working for IE at the moment..
              Yeah that was my worry. At a guess (going on from the only way I can think to do it at the moment) there won't be any way to safely implement it into <IE 9 using just HTML/CSS.

              I haven't used the thing I linked you too yet, but I will be using it for my website redesign. It looks fairly easy to implement, I think you can change a few bits of CSS and it will get it working with your site's design.


              • #8
                i was wondering the same thing, Dr.McNinja. this is how i am doing it:


                <div class="element">
                <div class="block">
                <div><img src="example.png"/></div>
                <div class="details">
                <p>mouse over content will go here.</p>


                .block {
                z-index: 1;

                .block:hover {
                opacity: 0;

                .details {
                font-family: sans-serif;
                font-weight: bold;
                text-align: center;
                top: 20px;
                width: 100px;
                z-index: 0;

                .element {
                width: 100px;
                height: 100px;
                margin: 5px;
                float: left;
                overflow: hidden;
                position: relative;
                color: #000000;
                background: #ECE9DE;

                .element * {
                position: absolute;
                margin: 0;
                Attached Files






                Incredible Stock

                Latest Topics


                GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings