joomladaze
Jr. Member
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
|
|
« 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
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 & 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
|
|
« 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
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 & 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
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
|
|
« Reply #6 on: 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);}
|
|
|
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
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
|
|
« 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
Posts: 197
|
|
« Reply #9 on: March 26, 2014, 01:56:42 PM » |
|
Joomla 3.2.3
|
|
|
Logged
|
|
|
|
jonahh
|
|
« 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
|
|
|
|
mikenicoll
|
|
« 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
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
|
|
« 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
|
|
|
|