[Rob RParticipant]

I notice when I insert an image using shortcode that when I hover over an opacity is added to the image. On this basis could you tell me if it is possible to:

a) Add a caption text which appears during this hover over effect; and
b) hyperlink the image when hover over is on.

Thanks

Rob

[RubinKeymaster]

Hey Rob,

you can see all the options we feature with our image shortcode here: http://theme.co/x/demo/integrity/1/shortcodes/images/ as you can see you can set a popover text.

[Rob RParticipant]

Thatnks for the reply but I don’t want a popover that is contained in a speech bubble type box. I want the image to be overlayed with a mask which contains the caption when the mouse hovers over the image. The image already seems to have mask when the mouse hovers over but I want to add text to that.

[RubinKeymaster]

Hey Rob,

this would require customization of the template files and css and you would have to give those images a custom class and if you want to make the overlay text dynamic then you would have to go even further so if you really want to do this then the first step would be to create a child theme. If you don’t know how to create a child theme we have a video in the Video Tutorials section. If you are not experienced with html&css I would not recommending adding this function.

[Rob RParticipant]

Thanks for the reply again. Can you indicate where to put the custom class in both the template files and when inserting the image. I am getting used to using child themes but still on a learning curve. Many thanks for the advice I hope you can provide.
Rob

[KoryKeymaster]

Hey Rob,

Thanks for writing back! For this particular request you’re probably going to want to copy over the function from the shortcodes plugin that outputs the images and you can paste this into the functions.php file of your child theme and create your own version of the shortcode:

function my_custom_image_shortcode( $atts ) {
  extract( shortcode_atts( array(
    'id'               => '',
    'class'            => '',
    'style'            => '',
    'type'             => '',
    'float'            => '',
    'src'              => '',
    'alt'              => '',
    'link'             => '',
    'href'             => '',
    'title'            => '',
    'target'           => '',
    'info'             => '',
    'info_place'       => '',
    'info_trigger'     => '',
    'info_content'     => '',
    'lightbox_thumb'   => '',
    'lightbox_video'   => '',
    'lightbox_caption' => ''
  ), $atts ) );

  $id               = ( $id               != ''      ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class            = ( $class            != ''      ) ? 'x-img ' . esc_attr( $class ) : 'x-img';
  $style            = ( $style            != ''      ) ? 'style="' . $style . '"' : '';
  $type             = ( $type             != ''      ) ? ' x-img-' . $type : '';
  $float            = ( $float            != ''      ) ? ' ' . $float : '';
  $src              = ( $src              != ''      ) ? $src : 'http://bit.ly/1i39aq7';
  $alt              = ( $alt              != ''      ) ? 'alt="' . $alt . '"' : '';
  $link             = ( $link             == 'true'  ) ? 'true' : '';
  $link_class       = ( $link             == 'true'  ) ? ' x-img-link' : '';
  $href             = ( $href             != ''      ) ? $href : $src;
  $title            = ( $title            != ''      ) ? 'title="' . $title . '"' : '';
  $target           = ( $target           == 'blank' ) ? 'target="_blank"' : '';
  $info             = ( $info             != ''      ) ? 'data-toggle="' . $info . '"' : '';
  $info_place       = ( $info_place       != ''      ) ? 'data-placement="' . $info_place . '"' : '';
  $info_trigger     = ( $info_trigger     != ''      ) ? 'data-trigger="' . $info_trigger . '"' : '';
  $info_content     = ( $info_content     != ''      ) ? 'data-content="' . $info_content . '"' : '';
  $lightbox_thumb   = ( $lightbox_thumb   != ''      ) ? $lightbox_thumb : $src;
  $lightbox_video   = ( $lightbox_video   == 'true'  ) ? ', width: 1080, height: 608' : '';
  $lightbox_caption = ( $lightbox_caption != ''      ) ? 'data-caption="' . $lightbox_caption . '"' : '';

  if ( is_numeric( $src ) ) {
    $src_info = wp_get_attachment_image_src( $src, 'entry-full-' . x_get_stack() );
    $src      = $src_info[0];
  }

  if ( is_numeric( $href ) ) {
    $href_info = wp_get_attachment_image_src( $href, 'entry-full-' . x_get_stack() );
    $href      = $href_info[0];
  }

  if ( is_numeric( $lightbox_thumb ) ) {
    $lightbox_thumb_info = wp_get_attachment_image_src( $lightbox_thumb, 'entry-full-' . x_get_stack() );
    $lightbox_thumb      = $lightbox_thumb_info[0];
  }

  if ( $lightbox_video != '' ) {
    $lightbox_options = "data-options=\"thumbnail: '" . $lightbox_thumb . "'{$lightbox_video}\"";
  } else {
    $lightbox_options = "data-options=\"thumbnail: '" . $lightbox_thumb . "'\"";
  }

  if ( $link == 'true' ) {
    $output = "<a {$id} class=\"{$class}{$link_class}{$type}{$float}\" {$style} href=\"{$href}\" {$title} {$target} {$info} {$info_place} {$info_trigger} {$info_content} {$lightbox_caption} {$lightbox_options}><img src=\"{$src}\" {$alt}></a>";
  } else {
    $output = "<img {$id} class=\"{$class}{$type}{$float}\" {$style} src=\"{$src}\" {$alt}>";
  }
  
  return $output;
}

add_shortcode( 'my_image', 'my_custom_image_shortcode' );

This is an adaptation of the x_shortcode_image() function in /x-shortcodes/functions/shortcodes.php and instead of using [image] for the shortcode it uses [my_image] as you can see in the last line.

Thanks!

[Tim MParticipant]

Hello i was wondering if you could help me

i would like a rollover/hover effect on each of the image buttons on this page http://rsaacademyits.com/rsa-new/home/parents/
i would like the rollever effect to have an orange background and white text – so the opposite to its normal state. Can you help at all?

thanks
Nav

[Kosher KMember]

Hi There,

Thanks for writing in

You need to have a different version of each image (opposite version of your current image) and add a unique class for each image, then use that class to show the opposite image when the default image is hover,

e.g. assuming you assign a class my-first-image to the first image,

you can then change the image on hover using this css code below

img.my-first-image:hover {
 content: url(the-opposite-image-url.jpg);
 width: 100%;
 height: 100%; 
}

Just do the same method for the rest of your images.

Hope that helps,

Have a great day

[Tim MParticipant]

Hiya

i have added the css however it has failed to work as it should have, what am i doing wrong?

css:

img.orange:hover {
content: url(http://rsaacademyits.com/rsa-new/wp-content/uploads/2014/10/SENDORANGE.jpg);
width: 100%;
height: 100%;
}

[Paul RModerator]

Hi Tim,

You also need to add the class orange to your image.

http://screencast.com/t/TJJjKXurge8w

Thanks

[srpickertParticipant]

Am I able to define a consistent size for the hover box? By default, it looks dynamic to the amount of text featured. I would like all the hover boxes to be the same size (and much bigger).

[ChristopherModerator]

Hi there,

It seems that you have changed the URL of page. Would you provide us with exact URL of a page where you have issue.

Thanks.

[Author]

Posts