Archived topic
CSS for rotating a graphic
3 replies · Started by Charles on July 19, 2021
Hi, I have a website.
https://on-site-spraying-and-repairs.com/
Which is a .net I have converted most of the pages to a similar look but using Generatepress.
On the home page http://new.on-site-spraying-and-repairs.com/ I cannot get the CSS which makes the graphics spin round and the background to change color to work.
Whilst I could have failed to add the correct CSS to the simple css plugin, Tom created, or I could have failed to copy all the html across, I was wondering if there is something in WordPress or Generatepress which would stop such code working?
Yours sincerely
Charles
You are using this CSS in your original site to rotate the icons:
.highlights>div:hover a[class^='hl'] {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);But on your new site, there's no such class called highlights. So of course the CSS won't work.
You can try this instead:
div.hl-circle:hover a[class^='hl'] {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}Let me know :)
Hi Ying,
Many thanks - for your perfect answer.
I am afraid in the UK it is mainly cold and wet but this week it is very hot - making it hard to think straight.
Kind regards
Charles
Hi Charles,
You are welcome :)
Enjoy the summer, hope it's not too hot!
