Shape 5

Joomla Templates => No1 Shopping - Club => : joomladaze March 21, 2014, 01:12:06 PM


: Remove Image tilt effect
: joomladaze March 21, 2014, 01:12:06 PM
How do I remove the effect that makes the images on the top of the home page do that tilt effect?

I would like it to be black box with text, and then when people hoover show the image with the text (without the weird tilt effect).

: Re: Remove Image tilt effect
: mikenicoll March 21, 2014, 07:21:03 PM
Edit: See Jonah's Response Below:

-Mike

: Re: Remove Image tilt effect
: joomladaze March 22, 2014, 05:49:10 PM
Is there a simple way to remove it? Maybe delete part of this code?

Here is the code:

<div class="s5_is_css_6">
<div class="s5_is_css_wrap_6">
<h3>Design &amp; Build</h3>
<div class="s5_is_css_hidden"><a href="#">Start Today![/url]</div>
</div>
<img src="images/design-and-build.jpg" alt="Design and Build" />
<div class="s5_is_slide_css"> </div>
</div>

: Re: Remove Image tilt effect
: mikenicoll March 23, 2014, 07:39:54 PM
Edit: See Jonah's Response Below:

-Mike

: Re: Remove Image tilt effect
: joomladaze March 23, 2014, 08:21:31 PM
I tried changing the 6's to 1's in this code, but it continued to look weird with every combination.

<div class="s5_is_css_6">
<div class="s5_is_css_wrap_6">
<h3>Design &amp; Build</h3>
<div class="s5_is_css_hidden"><a href="#">Start Today![/url]</div>
</div>
<img src="images/design-and-build.jpg" alt="Design and Build" />
<div class="s5_is_slide_css"> </div>
</div>

Are you saying to change the styling of #6 somewhere else?

: Re: Remove Image tilt effect
: joomladaze March 24, 2014, 11:42:49 AM
So I still can't remove the image tilt effect, but I've managed to work around it by changing the images.

Another problem I am having is that the images seem to stick out about 5 pixels below the black box (so you see a sliver of the image before you put you hoover your mouse). I changed the image size by reducing the height, but the same thing still happens.

I copied the image size of the sample image from the template (700 x 513).

This is the current code I am using:

<div class="s5_is_css_6">
<div class="s5_is_css_wrap_6">
<h3>Monitoring</h3>
<div class="s5_is_css_hidden"><a href="#">Numbers Never Lie[/url]</div>
</div>
<img src="images/marijuana-consulting-business-colorado.jpg" alt="Marijuana Business Consulting" />
<div class="s5_is_slide_css"> </div>
</div>

and the image size is 700 x 513.

Attached is a screen shot showing the images sticking out below the black box.




: Re: Remove Image tilt effect
: jonahh March 24, 2014, 01:48:59 PM
To remove these effects look at about line 1626 of your template.css file

:
/* S5 INFO SLIDE CSS VERSION
----------------------------------------------------------- */

The look for the following and remove:


:
.s5_is_css_1 img, .s5_is_css_5 img, .s5_is_css_6 img {	
	-ms-transform:scale(1) rotate(0deg); /* IE 9 */
	-webkit-transform:scale(1) rotate(0deg); /* safari chrome */
	transform: scale(1) rotate(0deg);}

.s5_is_css_1:hover img, .s5_is_css_5:hover img, .s5_is_css_6:hover img	{
	-ms-transform:scale(1.1) rotate(-5deg); /* IE 9 */
	-webkit-transform:scale(1.1) rotate(-5deg); /* safari chrome */
	transform: scale(1.1) rotate(-5deg);}

: Re: Remove Image tilt effect
: joomladaze March 24, 2014, 02:23:02 PM
Thank you very much. That worked perfectly. I need to learn more about CSS.

Any idea about how to fix the portion of the images that stick out of the bottom of the black box?

An image is attached showing the problem. The photos seem longer than the black box. I reduced the image height, and it did not fix the problem.

: Re: Remove Image tilt effect
: jonahh March 25, 2014, 01:54:45 PM
Which version of Joomla are you running?

: Re: Remove Image tilt effect
: joomladaze March 26, 2014, 01:56:42 PM
Joomla 3.2.3

: Re: Remove Image tilt effect
: jonahh March 27, 2014, 12:03:14 PM
Thats odd can you post a URL where this occurs?

: Re: Remove Image tilt effect
: joomladaze April 02, 2014, 08:01:51 PM
http://www.dynamicgrowthpartners.com/

: Re: Remove Image tilt effect
: mikenicoll April 03, 2014, 05:02:13 PM
Hello,

Change the bolded value below to 100% and it should work properly.

s5_info_slide.css - line 478

.s5_is_css_6 .s5_is_slide_css {
    background-color: #000000;
    color: #FFFFFF;
    height: 100%;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    opacity: 1;
    position: absolute;
    transform: translateY(-102%);
    width: 100%;
}

-Mike

: Re: Remove Image tilt effect
: joomladaze April 08, 2014, 05:57:07 PM
Awesome. That worked perfectly. Thanks for your assistance. Can't wait to finish this site.

: Re: Remove Image tilt effect
: mikenicoll April 08, 2014, 10:37:15 PM
Glad you got it sorted.

-Mike