1 post
  • Has been part of the Envato Community for over 2 years

I’m starting to learn php and how to code wordpress themes.

So for images I’d like to use a popular effect which is a hover div on the photo which shows relevant info.

Here is an example theme which uses this effect: http://themeforest.net/item/super-grid-retina-ready-portfolio-blog/full_screen_preview/4097521

Normally I’d use a div that has a relative position and then within place the image and the hover with an absolute position and width and height of 100%.

So I have two questions:
  • 1. What’s the correct way to append the “hover” class to the image?
  • 2. What do most wp authors do if the user doesn’t want this effect? Do they apply this effect to only image type posts? what if the user wants to say insert an image thats not full width and have text wrap?
  • Thanks.
    82 posts
    • Has been part of the Envato Community for over 4 years
    • Has sold $10,000+ on Envato Market
    • Has collected 100+ items on Envato Market
    • Sells items exclusively on Envato Market

    1. Use jquery addClass. Or if you’re using HTML5, you can wrap the element with and use :hover property.

    2. Authors would allow users to turn them on/off on the admin panel.

    Hope this helps 8-)

    Helpful Information

    • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
    • Open a support ticket if you would like specific help with your account, deposits or purchases.
    • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

    Most of all, enjoy your time here. Thank you for being a valued Envato community member.

    Post Reply

    Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

    <strong></strong> to make things bold
    <em></em> to emphasize
    <ul><li> or <ol><li> to make lists
    <h3> or <h4> to make headings
    <pre></pre> for code blocks
    <code></code> for a few words of code
    <a></a> for links
    <img> to paste in an image (it'll need to be hosted somewhere else though)
    <blockquote></blockquote> to quote somebody

    :grin: :shocked: :cry: Complete List of Smiley Codes