Announcement Announcement Module
Collapse
No announcement yet.
Mouse over image to show div and text Page Title Module
Move Remove Collapse
Search Search Module
Collapse

Advertisement Advertisement Module
Collapse

Featured Images Featured Images Module
Collapse

Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
Latest Topics Latest Topics Module
Collapse

  • Cosmo
    Reply to EFI printers? Anyone have any experience?
    Cosmo
    We saw one run at a place we visited a few months back. It was running board (which is the vast majority of what we would be running) and we were very happy with what was coming off of it as well as the...
    Today, 12:10 PM
  • KitchWitch
    Reply to Moving text background
    KitchWitch
    Hi Fstenbergp and welcome to GDF.

    We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you haven't done...
    Today, 11:57 AM
  • fstenbergp
    Moving text background
    fstenbergp
    Hello GDF!

    I would like to make some moving effects on the attached file if you may say so.

    What I am wishing to do is create a perfect looping gif, where the text moves in...
    Today, 11:53 AM
  • skribe
    Reply to how got project of graphic designing
    skribe
    Welcome design square!

    As you are a new member please take a few minutes and read though our rules and guidelines for new members. The following links should get you up to speed.
    ...
    Today, 11:27 AM
  • Kim
    Reply to How to start a proffesional "Name-Label-stickers" business?
    Kim
    Thanks for your time and answers.

    As I said, I am COMPLETELY new and know nothing about how to make name labels and what equipment to use for this purpose.
    Do anybody know a guide...
    Today, 10:10 AM
Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

X
Conversation Detail Module
Collapse
  • 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):

    http://laurencekim.com/
    http://www.alexbrunner.com/

    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?
    http://www.w3schools.com/css/css_image_transparency.asp

    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, 08: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

    Comment


    • #3
      http://buildinternet.com/project/mosaic/

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

      Comment


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

        @Ang
        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.

        Comment


        • #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

          Comment


          • #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..

            Comment


            • #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.

              Comment


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

                HTML:

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



                CSS:

                .block {
                float:left;
                position:relative;
                overflow:hidden;
                width:100px;
                height:100px;
                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

                Comment

                 
                home | site map | advertising/sponsorships | about us | careers | contact us | help courses | browse jobs | freelancers | events | forums | content | member benefits | reprints & permissions about | terms of use | privacy policy | Copyright © 2014 Mediabistro Inc. Mediabistro Inc. call (212) 389-2000 or email us
                Working...
                X