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

Advertisement Advertisement Module

Featured Images Featured Images Module

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

  • KitchWitch
    Comment on My First Design Assignment.
    The forum is psychotically insane, Krazy. Lots of things don't work and some just don't work well. The best way to post an image (that I've found) is to upload it to an image hosting site (I use Photobucket),...
    Today, 02:02 PM
  • seamas
    Reply to Cover Layout Feedback
    I really don't get minimalism here. I mean you don't have much going on, but instead of a minimal approach you tried to make it interesting --and it isn't working.

    Minimalism is as much about...
    Today, 02:02 PM
  • Yehoshua
    Reply to Cover Layout Feedback
    The project is a 50 minimalist-driven icons booklet of anything representative of the 1980's. I'm not able to upload the emblems at this time, but sometimes I struggle with layouts and was just wondering...
    Today, 01:40 PM
  • Cosmo
    Reply to Anybody use a Mac Mini?
    For the price of the Mac Mini and a new monitor, you're just about at the price of an iMac. I'd just get the iMac if it were me.
    Today, 01:37 PM
  • kemingMatters
    Comment on Infographics...struggle
    I wouldn't say it's necessarily a creativity problem, it just looks like you are thinking of the group of facts as a whole opposed to their own entities, try solving the smaller problems first and then...
    Today, 01:15 PM
Advertisement Advertisement Module

Sponsors Sponsors Module

Conversation Detail Module
  • 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, 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


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


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