Title: Css classes
Last modified: November 6, 2016

---

# Css classes

 *  [thaqua](https://wordpress.org/support/users/thaqua/)
 * (@thaqua)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/css-classes-9/)
 * Hello elementor people,
 * I have a question about getting an hover animation for my immage. I would like
   to turn my image grey just like the images on this website. I have seen the animations
   at the style tab but this is not one of them. I tried to get it done with the
   css classes at the advanced tab but i am clearly not advanced enough because 
   nothing worked I got from the internet.

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Thread Starter [thaqua](https://wordpress.org/support/users/thaqua/)
 * (@thaqua)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/css-classes-9/#post-8402431)
 * Hello elementor people,
 * I have a question about getting an hover animation for my immage. I would like
   to turn my image grey just like the images on this website [http://www.samasamasilver.com/c-3446145/armbanden/](http://www.samasamasilver.com/c-3446145/armbanden/).
   I have seen the animations at the style tab but this is not one of them. I tried
   to get it done with the css classes at the advanced tab but i am clearly not 
   advanced enough because nothing worked I got from the internet.
 * Is there anyone that can help my with this issue?
 * Thanks in advance
    Kind regards, Pieter
 * Edit: bad internet connection
 *  [Boaz](https://wordpress.org/support/users/boazpojo/)
 * (@boazpojo)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/css-classes-9/#post-8404580)
 * Hi [@thaqua](https://wordpress.org/support/users/thaqua/),
    At the moment it 
   isn’t possible. We will consider to include this in future versions.
 *  [pingram](https://wordpress.org/support/users/pingram3541/)
 * (@pingram3541)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/css-classes-9/#post-8406488)
 * You can do this with simple css but the example you provided is more than just
   an image. It’s also a text element that is hidden but later becomes revealed 
   when you hover the image.
 * This can be achieved in Elementor using a little extra finesse. An example would
   be adding a caption to the image and giving it a class such as .shady:
 *     ```
       .shady figure {
           position: relative;
       }
       .shady figcaption:before {
           content: ' ';
           display: inline-block;
           height: 100%;
           vertical-align: middle;
       }
       .shady figcaption {
           background: rgba(0, 0, 0, 0.45);
           opacity: 0;
           padding: 1% 0;
           position: absolute;
           transition: opacity 200ms;
           top: 0;
           bottom: 0;
           left: 0;
           right: 0;
       }
       .shady figcaption:hover {
           opacity: 1;
       }
       ```
   
 *  Thread Starter [thaqua](https://wordpress.org/support/users/thaqua/)
 * (@thaqua)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/css-classes-9/#post-8413170)
 * Thanks for your response both! I am going to try it out now.
    Pretty basic but
   how do i give a class to the caption?
 *  [pingram](https://wordpress.org/support/users/pingram3541/)
 * (@pingram3541)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/css-classes-9/#post-8413264)
 * In my example above, I gave the image element a class of shady which allows me
   to target all of the child elements as well.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Css classes’ is closed to new replies.

 * ![](https://ps.w.org/elementor/assets/icon-256x256.gif?rev=3444228)
 * [Elementor Website Builder - more than just a page builder](https://wordpress.org/plugins/elementor/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/elementor/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/elementor/)
 * [Active Topics](https://wordpress.org/support/plugin/elementor/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/elementor/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/elementor/reviews/)

 * 5 replies
 * 3 participants
 * Last reply from: [pingram](https://wordpress.org/support/users/pingram3541/)
 * Last activity: [9 years, 7 months ago](https://wordpress.org/support/topic/css-classes-9/#post-8413264)
 * Status: not resolved