0

I want to change the opacity of a div when the mouse is hovered over the area so I can reveal some text in djangocms.

When I add .team-img:hover .overlay { opacity: .8; } djangocms clears it when I save the changes because it confuses :hover for the definition of the property value

Djangocms gives an attribute field for the type of rule and a another field for the value. In the attribute field i wrote style and in the value field i wrote 

.team-img:hover .overlay { opacity: .8; }
Alexander Darlington Agboada
  • 1

1 Answers1

0

You cannot and should not add pseudo element styling inline. See this answer.

For Django CMS the right place to put styling is the project's css file. In your case you should probably add:

.team-img:hover .overlay { opacity: .8; }

Then, you can add the classes in the attribute fields using the class attribute.

Probably even better, if you use the djangocms-style plugin, you can configure a style (DJANGOCMS_STYLE_CHOICES specifically) with the class properly set. See this github repository. This takes away the burden from the editors to remember the class names.

Fabian
  • 571
  • 5
  • 24