WordPress mouse over text with background color?

Question

I m new to wordpress and using 4.2.2 version. I need to show mouse over background color with text on image. The given text and images are generating dynamically from the admin panel. I have given the below images for your reference, first image right now im having my site, and next image I need to do like that.

enter image description here

Thanks in advance!

possible duplicate of [Text on image mouseover?](http://stackoverflow.com/questions/14149360/text-on-image-mouseover) — Vidya Sagar, Jul 06 '15 at 06:53
There is already a fiddle existing here. http://jsfiddle.net/4LjeL/2/ — Vidya Sagar, Jul 06 '15 at 06:55
Thanks sagar, i'll check this and how to integrate in WordPress. — Jagan Akash, Jul 06 '15 at 07:04
I am using enfold theme, in this i dont know which file is working for show the outputs. This is my site and my page, (http://ef.efvoice.com/ef/?page_id=132) i need to know the file path for this. Can pls tell me. I struggling in this for couple of days. — Jagan Akash, Jul 08 '15 at 07:40
Finally i write in css and show the mouse over with text. Thank you for all your support. — Jagan Akash, Jul 08 '15 at 12:08

Johnny John · Answer 1 · 2015-07-06T15:18:58.503

0

You can use this function for wordpress

<?php wp_get_attachment_image( $attachment_id, $size, $icon, $attr ); ?>

or

<?php wp_get_attachment_metadata( $attachment_id, $unfiltered ); ?>

Here is the codex

https://codex.wordpress.org/Function_Reference/wp_get_attachment_image https://codex.wordpress.org/Function_Reference/wp_get_attachment_metadata

With this u can get the name of the image and show like the Sagar said

You'll use this in your page, not in yout functions.php

U won't be this in the functions, you'll use this in your page, like this

<?php 
     $my_query = new WP_Query('post_type=eventos&category_name=galeria_evento&posts_per_page=1');
                    while ($my_query->have_posts()) : $my_query->the_post(); 
                        ?>

                    <?php
                        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                        $args = array(
                                        'post_type' => 'attachment',
                                        'post_parent' => $post->ID,
                                        'numberposts' => -1,
                                        'paged' => get_query_var('paged'),
                                        'exclude' => get_post_thumbnail_id()
                                    );

                   // making the list of the attachments
                        $attachments = get_posts( $args );
                        if ( $attachments ) {
                            foreach ( $attachments as $attachment ) {
                            // getting the image and title of the attachment
                            echo "<div class='item-slide'><p class='title-slide'>".apply_filters( 'the_title', $attachment->post_title )."</p>".wp_get_attachment_image( $attachment->ID, 'full' )."</div>";                                
                            }
                        }
                    ?>


            <?php endwhile; ?>

edited Jul 06 '15 at 15:18

answered Jul 06 '15 at 07:24

Johnny John

394
2
10

The photos coming from the wordpress page, so how can i include the functions. i think i need to edit the page or template file to put these functions right? Then i need to find which css file working for these page nd include the css codes right? i m confusing to write codes in which file. – Jagan Akash Jul 06 '15 at 09:52
No, u don't need to change so much the code, just use the foreach for take the attachments, and use the wp_get_attachment_meta($id) for take the atributtes about the attachment in the foreach, i'll find where i use this one time and put the code here – Johnny John Jul 06 '15 at 11:33
in side themes, in which file i need to add this function – Jagan Akash Jul 06 '15 at 11:36
I have find the file place, here already this function there. This is the function, inside the post.php file. function wp_get_attachment_metadata( $post_id = 0, $unfiltered = false ) { $post_id = (int) $post_id; if ( !$post = get_post( $post_id ) ) return false; $data = get_post_meta( $post->ID, '_wp_attachment_metadata', true ); if ( $unfiltered ) return $data; return apply_filters( 'wp_get_attachment_metadata', $data, $post->ID ); } – Jagan Akash Jul 06 '15 at 12:44
In this function what i need to add. Can u pls tell me – Jagan Akash Jul 06 '15 at 12:48
I edited the answer, u will use this in your page not in your functions – Johnny John Jul 06 '15 at 15:14
The above code i need to write inside theme ,page.php or where i need to add. I have checked this code in page.php but it not working. – Jagan Akash Jul 07 '15 at 05:30
I am using enfold theme, in this i dont know which file is working for show the outputs. This is my site and my page, (http://ef.efvoice.com/ef/?page_id=132) i need to know the file path for this. Can pls tell me. I struggling in this for couple of days. – Jagan Akash Jul 08 '15 at 07:38
1

U are getting the title, now u just put a title in your image inside wordpress in the tab "Media" – Johnny John Jul 08 '15 at 22:22
yes john there i already added. Now i customized in css and show the text what i need. Thanks for your support. – Jagan Akash Jul 09 '15 at 05:06
Your welcome, u use these function or other way to show? – Johnny John Jul 09 '15 at 11:15

WordPress mouse over text with background color?

1 Answers1