Inline images when using hover image plug in

  • Resolved Volcs

    (@volcs)


    13 years, 7 months ago

    Hello folks. I’m building a profile page of some boxers we have lined up for a charity event and I’d like to display them in rows of four, showing their name, changing to their photo on rollover.

    I downloaded Hover Image plugin (http://wordpress.org/extend/plugins/hover-image/) to handle the rollover which works fine, but I can’t get the images to display in line – sure it’s something simple in the CSS but I’ve got brain fog of the highest order. I haven’t changed alignleft from default so it should still be float:left…

    You can see the page here: http://universalchance.org/our-boxers/

    This is what I have in the page editor:

    [himage]<a href="http://universalchance.org/benwharfe"><img class="alignleft size-thumbnail wp-image-250" title="benwharfethumb" src="http://universalchance.org/wp-content/uploads/2012/09/bentile1.png" alt="" width="150" height="150" /></a>
<a href="http://universalchance.org/wp-content/uploads/2012/09/bentile1.png"><img class="alignleft size-thumbnail wp-image-279" title="bentile" src="http://universalchance.org/wp-content/uploads/2012/09/benwharfe-e1348763397845-150x150.png" alt="" width="150" height="150" /></a>[/himage]

[himage]<a href="http://universalchance.org/matttotman"><img class="alignleft size-full wp-image-298" title="matttile" src="http://universalchance.org/wp-content/uploads/2012/09/matttile.png" alt="" width="150" height="150" /></a><a href="http://universalchance.org/wp-content/uploads/2012/09/matttotman.png"><img class="alignleft size-thumbnail wp-image-279" title="matttotman" src="http://universalchance.org/wp-content/uploads/2012/09/matttotman-150x150.png" alt="" width="150" height="150" /></a>[/himage]

    Any help appreciated!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 7 months ago

    Volcs,

    When displaying block elements, such as <div>s and wanting to display them inline, you generally have two options through CSS;

    1. Convert the elements into inline.
    E.g,

    display: inline;

    2. Float the elements left.
    E.g,

    float: left;

    I would recommend using the Float as when using inline elements you may have a hard time applying additional positioning (if necessary).

    In your circumstance, you should apply float: left; to each <div> within the post entry.
    E.g

    .entry-content div {
 float: left;
}

    Do you know where to apply this CSS; have you a Child Theme or Custom CSS plugin?

    Generally CSS queries this specific aren’t supported as they extend the scope of WordPress’ forums. A CSS specific forum would be best.

    Thread Starter Volcs

    (@volcs)

    13 years, 7 months ago

    Ace. Thanks very much. I applied the rule to my child theme CSS and seems to have done the trick. Many thanks.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Inline images when using hover image plug in’ is closed to new replies.