Ignacio Perez

You can add custom CSS code in the plugin’s settings. This is an example of code you can use:

.hib-text-table-cell .title * {
	font-family: 'Roboto', sans-serif;
	color: #fff;
	font-size: 40px;
}

.hib-text-table-cell .subtitle {
	font-family: 'Roboto', sans-serif;
	color: #fff;
	font-size: 20px;
}

If you dont have the Roboto font added to your web, add this line to the web header to use the font from Google Fonts:

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

Your theme or other plugin is modifying the Hover Image Button plugin, adding <code> tags and changing the second button size.

If you inspect the code, you can see that in the second button it is removing the px units, so the browser can not render the button properly.

You can try to put the buttons inside ‘[hover-image-row]’.

By now it is not possible to change the visibility of the buttons, but you can add custom CSS code to do this.

Copy and paste next code to the CSS field in Hover Image Button settings to hide buttons on mobile devices:

@media handheld, only screen and (max-width: 767px) {
	.hib-grid {
		display: none !important;
		width: 0;
		height: 0;
	}
	.hib-container {
		display: none !important;
		width: 0;
		height: 0;
	}
}

Or use this code to hide on mobile and tablet devices:

@media handheld, only screen and (max-width: 991px) {
	.hib-grid {
		display: none !important;
		width: 0;
		height: 0;
	}
	.hib-container {
		display: none !important;
		width: 0;
		height: 0;
	}
}

You can use the old version while I try to fix this problem. Here is the first version:

https://github.com/igpremuo/hover-image-button/archive/master.zip

Copy the hover-image-button folder in to the /wp-content/plugins directory`.

Yes, it is possible, add the option width and height with the size in pixels or in percentage.

[hover-image-button title="Section 1" subtitle="It's and amazing section" link="http://my-section-link" image="http://my-image-link" width="250px" height="100px"]

or

[hover-image-button title="Section 1" subtitle="It's and amazing section" link="http://my-section-link" image="http://my-image-link" width="100%" height="50%"]

The width does not work if you are using it with the hover-image-row tag.

It is possible, just add the shortcode without the title and subtitle tags.