WordPress.org

Ready to get started?Download WordPress

Forums

Hover over thumbnail featured images (18 posts)

  1. Wild at Art Atelier
    Member
    Posted 1 year ago #

    I would like to create an affect on my blog where if you hover over the thumbnail image it fades out a little and the title of the post appears on top. Could any one please help me :)
    http://test.wildatartatelier.com/blog/

  2. Creatrix
    Member
    Posted 1 year ago #

    There's quite a nice plugin for this that uses two images. The first displays as usual and the second displays on hover.
    It works by putting a [ihover] First image + Second image [/ihover] around the images.
    (obviously you need the plugin installed for it to work though!)
    For your second image you could use the thumbnail (maybe decrease the opacity) and then just add some text to it - thereby when you hover over it it fades out a little and you title appears!

  3. Wild at Art Atelier
    Member
    Posted 1 year ago #

    Thank you for the advice but I don't understand where to put [ihover] into...

    [ Please do not bump, that's not permitted here. ]

  4. Creatrix
    Member
    Posted 1 year ago #

    Is this what you are trying to achieve?

    My apologies though, once you have the plugin installed, you use [himage] First picture, Second Picture[/himage] not the shortcode i originally said...

  5. Wild at Art Atelier
    Member
    Posted 1 year ago #

    Yes exactly! Where do I put the code in? Do I upload the second photo (with the faded image and text) in Media and link its URL?

  6. Creatrix
    Member
    Posted 1 year ago #

    So you upload and install the plugin.
    Then on the page where you want the image to appear:

    [himage]First Picture Here followed by Second Picture[/himage]

    Upload the pictures into your media library then add them onto the page via the 'add media' button.

  7. Wild at Art Atelier
    Member
    Posted 1 year ago #

    I've tried adding it to the actual post page and the general Blog page where all thumbnails are shown but neither work. Am I inserting it in the write place?

  8. Creatrix
    Member
    Posted 1 year ago #

    It should work on any page.
    For the example i showed you i made a page called test and this is what it looked like in the editor.
    I can post the html code if that's of any help.

  9. Wild at Art Atelier
    Member
    Posted 1 year ago #

    yes that would be great!!

  10. Creatrix
    Member
    Posted 1 year ago #

    So on the page 'test' that i created this is the HTML that is in the editor:

    [himage]<img class="aligncenter size-full wp-image-392" title="smal" src="http://chrislawtonphotography.co.uk/wp-content/uploads/2013/01/smal.jpg" alt="" width="200" height="200" /><img class="aligncenter size-full wp-image-391" title="small2" src="http://chrislawtonphotography.co.uk/wp-content/uploads/2013/01/small2.jpg" alt="" width="200" height="200" /> [/himage]

    You would obviously need to upload the images into your media library and then change the links.

  11. Wild at Art Atelier
    Member
    Posted 1 year ago #

    I still can't manage to do it. Is there any other way?

  12. Creatrix
    Member
    Posted 1 year ago #

    There probably is another way using javascript or other language but i'm not too much of an expert on those. I'd be willing to take a look at your problem with Hover Image plugin if you like.

  13. Wild at Art Atelier
    Member
    Posted 1 year ago #

    That would be great, what do you need?

  14. Creatrix
    Member
    Posted 1 year ago #

    I'd need the wordpress login details but i don't think the mods allow them to be dished out, nor can i give out my email - so if you like you can get in touch with my via my website. http://chrislawtonphotography.co.uk/contact/

  15. Wild at Art Atelier
    Member
    Posted 1 year ago #

    Is there no other way? Without wanting to be offensive I am a bit reluctant to give send my login details to someone I don't know. Couldn't I send you the copy of the style.css files, index, etc. whatever you think you might need?

  16. Creatrix
    Member
    Posted 1 year ago #

    That's quite understandable. Unfortunately i don't think it has much to do with the other files. All I can do (and i know these might sound obvious) is just to double check that you A. have the plugin installed and B. make sure you are using the [himage] tag like i showed in the code above.
    In theory once you have the plugin installed you should be able to copy and paste that code above onto any page. Just make sure that you are viewing the page on the 'text' tab and not the 'visual' one as it includes HTML that the visual tab will not be able to interpret.

  17. rajeshburmann
    Member
    Posted 1 year ago #

    Hello Creatix,

    I was searching for the subject and I came across your detailed posts. I have been able to install it but I wanted to know if an action can be included on click.

    Please let me know if you have changed the program to include this.

    Thanks.

  18. Creatrix
    Member
    Posted 1 year ago #

    What kind of 'action' are you looking to include?

Topic Closed

This topic has been closed to new replies.

About this Topic