Forum Support

Shape 5
January 20, 2022, 08:29:37 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Remove Image tilt effect  (Read 979 times)
joomladaze
Jr. Member
**
Offline Offline

Posts: 197



« on: 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).
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: March 21, 2014, 07:21:03 PM »

Edit: See Jonah's Response Below:

-Mike
« Last Edit: March 26, 2014, 06:43:57 PM by mikenicoll » Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
joomladaze
Jr. Member
**
Offline Offline

Posts: 197



« Reply #2 on: 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>
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: March 23, 2014, 07:39:54 PM »

Edit: See Jonah's Response Below:

-Mike
« Last Edit: March 26, 2014, 06:44:04 PM by mikenicoll » Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
joomladaze
Jr. Member
**
Offline Offline

Posts: 197



« Reply #4 on: 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?
Logged
joomladaze
Jr. Member
**
Offline Offline

Posts: 197



« Reply #5 on: 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.



Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #6 on: March 24, 2014, 01:48:59 PM »

To remove these effects look at about line 1626 of your template.css file

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

The look for the following and remove:


Code:
.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);}
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
joomladaze
Jr. Member
**
Offline Offline

Posts: 197



« Reply #7 on: 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.
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #8 on: March 25, 2014, 01:54:45 PM »

Which version of Joomla are you running?
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
joomladaze
Jr. Member
**
Offline Offline

Posts: 197



« Reply #9 on: March 26, 2014, 01:56:42 PM »

Joomla 3.2.3
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #10 on: March 27, 2014, 12:03:14 PM »

Thats odd can you post a URL where this occurs?
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
joomladaze
Jr. Member
**
Offline Offline

Posts: 197



« Reply #11 on: April 02, 2014, 08:01:51 PM »

http://www.dynamicgrowthpartners.com/
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #12 on: 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
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
joomladaze
Jr. Member
**
Offline Offline

Posts: 197



« Reply #13 on: April 08, 2014, 05:57:07 PM »

Awesome. That worked perfectly. Thanks for your assistance. Can't wait to finish this site.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #14 on: April 08, 2014, 10:37:15 PM »

Glad you got it sorted.

-Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.