Support ForumCreating image hover – Support Forum

Creating image hover

Victorynova — Mon, 09 Nov 2015 06:44:14 +0000

Hi! it’s me again, just wanna ask if it is possible to create image hover effect like this ( https://miketricking.github.io/dist/ )?

Im not that familiar with codes but i can make it zoom when i hover, the question is how can i make div or ID so that i can create a container or overflow or something like that. Where specifically should I put the html code since the theme or wordpress is run by php.

i just want to put hover effects on the images this page ( https://victorynova.org/home/podcast/ )or if it is possible to just use the hover effects on the portfolio

Thank you so much!

Reply To: Creating image hover

IshYoBoy — Mon, 09 Nov 2015 12:44:54 +0000

Hey,

To create additional HTML around the image, etc.. you need to override the template which outputs the content. Here is a guide how to achieve it in a child theme, but in your case you will be editing the “ish_image.php” file:

Override shortcode template in a child theme

P.S. As you do not need the hover on every single image, you can make the code output the necessary html only if the “css_class” contains a special classname and then add this class name when editing the options of the image.

Hope this answers your question.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Creating image hover

Victorynova — Tue, 10 Nov 2015 08:26:23 +0000

This reply has been marked as private.

Reply To: Creating image hover

Victorynova — Tue, 10 Nov 2015 08:27:05 +0000

This reply has been marked as private.

Reply To: Creating image hover

IshYoBoy — Wed, 11 Nov 2015 08:45:18 +0000

Hi Victorynova,

you have to edit this file:
ishyoboy-shortcodes/assets/backend/vc_extend/shortcodes_templates/ish_image.php

1. Replace this part of code:

// SHORTCODE END
$return .= '</div>';

1 2	// SHORTCODE END $return .= ' ';

New code:

// SHORTCODE END
	$return .= '<div class="overlay">
                    <h2>Hover effect 4</h2>';

	$return .= '<a class="info"';

	// HREF
	if ( 'custom' == $sc_atts['link_type'] ){
		// Custom Link
		$url_data = vc_build_link( $sc_atts['link_url'] );
		$return .= ( '' != $url_data['url'] ) ? ' href="' . esc_url( apply_filters( 'ishyoboy_sc_url', $url_data['url'] ) ) . '"' : '';
		$return .= ( false !== strpos( $url_data['target'], '_blank') ) ? ' target="_blank"' : '';
	}
	else{
		// Large image
		$img_details = wp_get_attachment_image_src( $sc_atts['image'], 'full' );
		$return .= ( '' != $img_details[0] ) ? ' href="' . esc_url( $img_details[0] ) . '" target="_blank"' : ' href="#"';
	}

	$return .= '>';

	$return .= '</div>';
	$return .= '</div>';

2. Find this lines:

// CLASSES
$class = 'ish-sc_image';

1 2	// CLASSES $class = 'ish-sc_image';

And add “hovereffect” class:

// CLASSES
$class = 'ish-sc_image hovereffect';

1 2	// CLASSES $class = 'ish-sc_image hovereffect';

Don’t forget add css code.
You will need maybe adjust this css code and also new inserted code to achieve best effect for you.

Please use a child theme to override any of the shortcodes or theme functionality.
https://support.ishyoboy.com/forums/topic/override-shortcode-template-in-a-child-theme/

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market