Shape 5

hello there,

I changed the color of some of the boxes but it removed the rotating effect that there is on mouse over. How can I activate that effect? That effect is still on the images where I did not change the color.


Thanks

Frederique

Hello,

Please post a URL

Also, check that the colors you changed didn't add extra <p> tags in the editor when you hit submit.

-Mike

Hello there,

This the link. It is still in development, so although you might recognize the BG image, it will be replaced shortly.

[url]http://www.quesacco.com/clients/ccafcb-j3-2014/index.php?lang=fr/url]

Regards,

Frederique

Hello,

1) You haven't implemented all the CSS for your new class names properly including things like hover states. You also have a typo in one of your class names where "vertex" is spelled "verte"

2) We don't provide support for custom coding new Tab Show classes into the Framework but I would advise you to look at the s5_info_slide.css file again and make sure any css pertaining to other classes such as .s5_is_css_6 .s5_is_slide_css is also applied to your new classes that you coded in. You are missing some css definitions on your new classes that are present for the ones already pre-programmed

3) You can also change the background color of pre-existing classes if this is easier by adjusting the already coded classes below:

s5_info_slide.css


-Mike

Hello Mike,


Actually "verte" means green in French. Just my way to differentiate my codes from the original ones.

If you could just indicate which part does the rotation, I will take care of the rest. There are so many codes it is complicated to find the right ones.

Changing the color of that class does not seem to work.

Thanks

Regards,

Frederique

Hello,

The following CSS from the Template.CSS file generates these effects.


-Mike

Hi,

I have found this as well, did you work out where this BG color can be change ?

Thanks

Nat

Hello,

You can change this at the following lines in the Template.CSS file:
Regards,

Hi, i'm having a problem on the mouse over rotating and zooming effect: the image is bigger, as in the demo (i.e. mens glasses), but doesn't fit into the div, it comes out as in the first image of the attachment.

this is the code i added:

.s5_is_css_5 img, .s5_is_css_6 img {
    transition: all 300ms ease-in 0s;
}
.s5_is_css_5 img, .s5_is_css_6 img {
    transform: scale(1) rotate(0deg);
    -ms-transform:scale(1) rotate(0deg); /* IE 9 */
    -webkit-transform:scale(1) rotate(0deg); /* safari chrome */
}
.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);
}

I also have

.s5_is_css_5 .s5_is_slide_css {
    background-color: #000000;
    color: #ffffff;
    height: 100%;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    opacity: 0.15;
    position: absolute;
    transform: translateY(-102%);
    width: 100%;
}
but if i change transform: translateY(-102%); to 100% it is like the image is too short, like in the second image.

I tried on the clean version of the template as well, but i get the same weird effect.
Can you help me please? What's wrong with my css?
Best regards,
Rita

Hello Rita,

Could you post a URL so I can take a closer look?

Here is the link
http://www.webhostingservice.it
Thank you :)

Hello,

Would you be able to PM me back end Super User so I can look at the source of each module and its styling properties?

Thanks,

Hello,

1) Change the display to block; instead of inline-block;


2) The y-translate should be 100% instead of 102% in the info slide css file


3) Your images need to be larger and make sure they are set to 100% width and height so they can fill the container size.

 :D thank you very much it works!!
The images are not right, i will change them with bigger ones.
thank you again, have a nice day.
Rita

NP :)