Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
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)
With jquery:
$('.chosen-class').hover(
function(){
$(this).atrr('src','path-to-image/with-gradient-on');
},
function(){
$(this).atrr('src','path-to-image/without-gradient');
}
);
Look at the circles on this site… http://charlottetang.com
I am trying to do exactly that with my circles except I want the caption to appear over the complete circle!
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 – 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/
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
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!
