Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Getting thumbnail containers clickable….

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #41284
    bogus
    Participant

    …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:

    if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>


    ‘, ”, ‘

    ‘); ?>

    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?

#117098
bogus
Participant

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.

#117101
chrisburton
Participant

@bogus Hey. Try this:

“>


‘, ”, ‘

‘); ?>

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

#117172
bogus
Participant

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?

#117174
chrisburton
Participant

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

#117182
bogus
Participant

Span class rollover, isn’t it?

Will post the code asap!

#117186
bogus
Participant

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/nhrsjhttp://codepen.io/joe/pen/nhrsj”)

#117187
chrisburton
Participant

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

#117188
chrisburton
Participant

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.

#117193
bogus
Participant

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.

#117194
chrisburton
Participant

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

if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>


‘, ”, ‘

‘); ?>

#117204
bogus
Participant

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

#117245
chrisburton
Participant

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

#117288
bogus
Participant

sure. it outputs this:

#117289
bogus
Participant

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)
  • The forum ‘Other’ is closed to new topics and replies.