Overriding css

Hello,
I am trying to set up some css rules. To do so I have appended this code to the override.css file:

Code: Select all

/*MORPH*/
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

Then, I should see some effects when using this html code:

Code: Select all

<div class="morph pic">
  <img src="http://lorempixel.com/300/300/nature/5" alt="beach">
</div>

However, I see nothing. I am trying to use Firebug, but I'm quite new to Joomla and I have some trouble using it. Could you please help me on how to use the overrides?
Thanks!

Dani

You need to enable override.css in template settings first. Then you should see it loads in source code of the site.

I have already enabled it. In fact, if I use the custom css I see the image spinning but not turning into a circle, that's why I guessed I needed to use the override.css.

This is my override.css file:

/*MORPH*/
.morph {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.morph:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

div.item {
margin: 50 0 0 0;
}

The first css override should spin and turn an image into a circle and the second one should add some spacing between articles. None of them work. Please help.
Cheers,

Dani

Could You please post an url to your site?

I need to check if there are no errors in css.

Hello,
My url is:
http://www.innocom.cat/
However, it is off-line as I am still building it. Is there any way to share an off-line site? I can PM you with a username and a password if needed.

Dani

Please send me a PM with:
1. URL to your website
2. login and password of user with login privileges (please create one for me)
3. link to this thread

The problem is - you make animation on wrong element.
Please add to your css:

Code: Select all

.morph {
overflow: hidden;}


Now you will see that there is some kind of circle cutout, but the element is wide and you will always get elliptical cutout not circle one.