Custom CSS on certain images

  • Hi,

    I’m trying to to create a rollover effect for certain images in a post. What I’d like is for when you hover your mouse over the image, the image darkens and two buttons show up.

    Something like what was done here:
    https://en.forums.wordpress.com/topic/mouse-over-image-darkening-and-button

    Except, I’d like two buttons instead of one, for them to be towards the bottom of the image, and I need for it only to happen on images I want. I know I would need to create a class for this, but I’m not exactly sure how to do the CSS.

    The blog is here: https://cuddlebuggery.com

    Is this possible?

    Thanks for any help!

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

  • The entire CSS is laid out in that thread. When you insert an image, you can add a class to it — so make that class whatever you want and then use it in the CSS file — i.e. something like:

    img.myclass {
   styles go here
}

    Since it has to do with hover, you’d likely need more than one CSS declaration.

    So far as where to add the CSS, it depends on how that theme is set up — and since that’s a commercial theme, you’ll need to contact Elegant Themes for help.

    Thread Starter shellnick2003

    (@shellnick2003)

    WPyogi,

    Thanks for responding. I tried using the code provided and it works amazingly, but I was unsure about how to add the class. I tried doing what you provided in addition to the other code, but it ended up highlighting the entire blog in grey when I hovered over an image. Elegant Themes doesn’t provide much customization help, so I’m pretty much on my own here. For now I was adding the code in the CSS Stylesheet Editor and letting it add it into the theme. So far the original code worked perfectly with that, I just need to get the class issue straightened out.

    I’m not that skilled with CSS as I am new to this, so please excuse any basic errors on my part. Should it look like this?

    img.button {

.entry p a {
    position: relative;
	float: left;
	cursor: pointer;
}

.entry p a:hover:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.5) url(https://cuddlebuggery.com/wp-content/uploads/2012/05/goodreads-badge-add-plus-2d25bb0f32eeac8660c13a521cf00c8e.png) center center no-repeat;
}

    Thanks so much for your help!

    I believe you can assign the class to an image by using the “advanced” options in the image settings, after the image has been inserted on the page.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom CSS on certain images’ is closed to new replies.

Tags