Grow your CSS skills. Land your dream job.

Getting thumbnail containers clickable….

  • # December 12, 2012 at 1:59 am

    …despite a rollover?

    Hey all. I’ve made this [wordpress theme](http://tingeltangel.megavillain.org/ “”). when you click archive in the lower right corner a masonry thumbnail grid appears. Now i want the thumbnail containers to be clickable so they open the post they belog to. the code for my boxes is:

    < ?php if (have_posts()) : while (have_posts()) : the_post();
    if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

    < ?php the_post_thumbnail('medium'); ?>

    < ?php the_title(); ?>

    < ?php the_time('jS F Y'); ?>


    < ?php the_tags( '

    ‘, ”, ‘

    ‘); ?>

    and the css for that area is:

    #masonry .box img {
    display: block;
    }

    #masonry .box .rollover {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 400px;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    }

    #masonry .box .rollover:hover {
    opacity:1;
    }

    #masonry .box .tags {
    position: absolute;
    width: 280px;
    top: 60px;
    left: 60px;
    }

    #masonry .box .tags a {
    font-family: Lato, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px 4px 4px 4px;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-property: 0.2s;
    -o-transition-duration:: 0.2s;
    -o-transition-property: background-color;
    -moz-transition-duration: 0.2s;
    -moz-transition-property: background-color;
    border: medium none;
    font-size: 16px;
    margin: 2px;
    padding: 5px 12px 8px;
    text-decoration: none;
    color: #171717;
    float: left;
    }

    How will I get that to work? Is my HTML correct for that specific task?

    # December 12, 2012 at 6:33 pm

    Maybe i didn’t come across properly with what my problem is. I’d just like to click a thumbnail anywhere except the tag buttons and open the post. Putting the span inside an a seems to be the wrong idea. :(

    I’d still like to keep the hover effect i put so much work into, though.

    # December 12, 2012 at 6:37 pm

    @bogus Hey. Try this:

    “>

    < ?php the_post_thumbnail('medium'); ?>

    < ?php the_title(); ?>

    < ?php the_time('jS F Y'); ?>


    < ?php the_tags( '

    ‘, ”, ‘

    ‘); ?>

    Although you might want to rethink your code as it doesn’t appear semantic.

    # December 13, 2012 at 1:30 am

    hey chris. Thank you!

    Mh it doesn’t seem to work and it keeps masonry from working correctly. Isn’t there some rule about not being allowed to put block elements into inline elements (i.e. a tags)?

    what would be a good way to get it more semantic but not loosing the looks?

    # December 13, 2012 at 1:34 am

    @bogus Post your code in http://codepen.io so we can take a look. Where is the inline element you’re referring to?

    # December 13, 2012 at 2:26 am

    Span class rollover, isn’t it?

    Will post the code asap!

    # December 13, 2012 at 2:50 am

    okay, here is a quick mockup (pretty dirty, i’m at work) but it should show what I mean:

    [Codepen](http://codepen.io/joe/pen/nhrsj “http://codepen.io/joe/pen/nhrsj”)

    # December 13, 2012 at 2:53 am

    @bogus Hey, do you have a live site that I can take a look at with the masonry in place?

    # December 13, 2012 at 3:20 am

    Ok, I edited your code that relies on better semantics.

    http://codepen.io/chrisburton/pen/hBdis

    I commented out your CSS but I think you should start again with my approach.

    # December 13, 2012 at 4:02 am

    yeah chris, take a look at my link in my first post. that is my current wordpress test install.

    thanks for your help! it’s well appreciated.

    # December 13, 2012 at 4:10 am

    @bogus Oops, I forgot about that. Can you tell me what this outputs?

    < ?php if (have_posts()) : while (have_posts()) : the_post();
    if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

    # December 13, 2012 at 5:40 am

    actually the boxes that are then put in place by masonry.

    # December 13, 2012 at 12:18 pm

    @bogus I mean that I need to see the code that it outputs.

    # December 13, 2012 at 4:06 pm

    sure. it outputs this:

    # December 13, 2012 at 4:06 pm

    splash

    Generative

    10th December 2012

    578770_449052365139320_2014276990_n

    Icecream

    10th December 2012

    bg

    Man of Steel

    10th December 2012

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".