Title: Image Hover CSS
Last modified: August 31, 2016

---

# Image Hover CSS

 *  Resolved [Bawse1010](https://wordpress.org/support/users/bawse1010/)
 * (@bawse1010)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/image-hover-css-1/)
 * I am using the Divi theme..
    The site is [http://www.aveladesign.com](http://www.aveladesign.com)
 * I am trying to get a caption to hover over the images on the homepage. I have
   css on the images to turn them from grayscale to color on hover, but I want to
   add a caption on hover to the bottom of the circles. Right now they only have
   the tags and that isnt what I want
 * For example, when the mouse hovers over the first circle, it should turn to color
   and “Logos” should also appear with a transparent black background within the
   circle. Right now, “logos” only appears in the small tag on hover.
 * I know the css to ONLY do the caption on hover, but not both the grayscale to
   color affect and the caption on hover. Any ideas?

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

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [10 years, 2 months ago](https://wordpress.org/support/topic/image-hover-css-1/#post-7208432)
 * Does the caption exist near the images at the moment? If not then you need to
   talk to your theme’s vendor about putting that in place first. Then you can use
   CSS to style it.
 *  [enriquerene](https://wordpress.org/support/users/enriquerene/)
 * (@enriquerene)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/image-hover-css-1/#post-7208438)
 * I’m not sure I understood what you want. You have an image. So you can put some
   class on it. Go to the Custom CSS local (all themes have this, but I don’t know
   where exactly is in divi) and insert `.chosen-class {}`.
 * Gray scale is a gradient? If you want to put a gradient on a image with `linear-
   gradient();` CSS statement, unfortunately it’s not possible. I had to do this
   once and couldn’t. Nowadays I would solve this problem with JavaScript.
 * When mouse over the image you change the src atribute of the img tag. When not
   over, you put the normal img src. ([http://www.tutorialspoint.com/jquery/events-hover.htm](http://www.tutorialspoint.com/jquery/events-hover.htm))
 * With jquery:
 *     ```
       $('.chosen-class').hover(
           function(){
               $(this).atrr('src','path-to-image/with-gradient-on');
           },
           function(){
               $(this).atrr('src','path-to-image/without-gradient');
           }
       );
       ```
   
 *  Thread Starter [Bawse1010](https://wordpress.org/support/users/bawse1010/)
 * (@bawse1010)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/image-hover-css-1/#post-7208440)
 * Look at the circles on this site… [http://charlottetang.com](http://charlottetang.com)
 * I am trying to do exactly that with my circles except I want the caption to appear
   over the complete circle!
 *  Thread Starter [Bawse1010](https://wordpress.org/support/users/bawse1010/)
 * (@bawse1010)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/image-hover-css-1/#post-7208441)
 * Sorry, it’s [http://charlottetang.com](http://charlottetang.com)
 *  [enriquerene](https://wordpress.org/support/users/enriquerene/)
 * (@enriquerene)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/image-hover-css-1/#post-7208445)
 * I see. I give you a crude code, and you customize it, ok?
 * You need to create divs and put the images as background. Then with hover effect
   the things appear:
 * HTML
    `<div id="circle-one"><div id="inside-one"></div></div>`
 * now in CSS:
 *     ```
       #circle-one {
           background-image: url("your-bg-one.jpg");
           border: 3px solid #ccc;
           width: "suppose 300px"
           border-radius: "here you put width/2 = 150px here"
       }
   
       #inside-one {
           display: none;
       }
   
       #inside-one:hover {
           display: block;
       }
       ```
   
 * So what you have is a div with a background, and inside of it another div with
   a content that just appear when hover.
 * This is a way to do that with only HTML and CSS (you can improve this with [@keyframe](https://wordpress.org/support/users/keyframe/)–
   [http://www.w3schools.com/css/css3_animations.asp](http://www.w3schools.com/css/css3_animations.asp)).
 * Probably you want to style the inner div, so some tips (I don’t like too much
   the front-end, but this link helps to learn much CSS) [https://css-tricks.com/examples/ShapesOfCSS/](https://css-tricks.com/examples/ShapesOfCSS/)
 * But it’s possible do the same with jquery like I posted before. You haev to create
   the image with and without the contents, and the JS care about change src when
   hover or not.
 * Looking for responsives grid to your CSS and see how use border-radius and width
   in grids
 *  Thread Starter [Bawse1010](https://wordpress.org/support/users/bawse1010/)
 * (@bawse1010)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/image-hover-css-1/#post-7208465)
 * Those codes didnt work the way I needed them to and it started to frustrate me,
   so I just used a CSS for 2 images (one grayscale and one color with the caption).
   it was pretty simple that way and my circles are exactly how I want them. Thank
   you for your help!

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

The topic ‘Image Hover CSS’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [Image hover](https://wordpress.org/support/topic-tag/image-hover/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 6 replies
 * 3 participants
 * Last reply from: [Bawse1010](https://wordpress.org/support/users/bawse1010/)
 * Last activity: [10 years, 2 months ago](https://wordpress.org/support/topic/image-hover-css-1/#post-7208465)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics