Need help? Check out our Support site, then


Mouse over image darkening and button

  1. Hi,

    is it possible to customize css so that all images posted would become a bit darker when mouse is in the field of the image and add a button in the middle?

    Thank you!

    The blog I need help with is naszetrendy.wordpress.com.

  2. Here is one way to do that:

    .entry a {
    	position: relative;
    	float: left;
    	cursor: pointer;
    }
    
    .entry a:hover:before {
    	content: "";
    	display: block;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	background: rgba(0,0,0,0.5) url(http://s.wordpress.org/about/images/logos/wordpress-logo-stacked-rgb.png) center center no-repeat;
    }

    To change out the image in that example with a button, replace the url() value with your button image. Change the rgba() values to change the color (first 3 numbers) and the level of opacity (last number).

    Note that this affects all links, not just images. So it works for your current setup, but it won't work if you add other content with links in any posts. If you wanted to limit to just certain links, you could add a class to those elements in the HTML and adjust the CSS a little. Also, note that if an image isn't linked, it won't work.

  3. Hi Designsimply :)

    That's amazing. Thank you very much!

    Would you also know where I can adjust it?
    After adding this CSS the width of posted images has changed and the darkening is a bit bigger (to the right and down). How can I fit it?

    I've also noticed that, as you mentioned it applies to all links.. so facebook and twitter links as well. Can I block this for those two links only?

    Thank you very much for all help :)

    Paula, naszetrendy.wordpress.com

  4. Paula,
    Because of the way this works, you will need to create a new class for elements you want to add this gradation/button to, and assign it to all of them. So you would call it something like ".greybutton" and then put in the CSS that DesignSimply shows you above, THEN go into your posts and attach the class to all the images you want to have this effect.

  5. Hi Zandyring :)
    thank you very much for your help :)

    I've put the following to css:
    #greybutton
    .entry a {
    position:relative;
    float:left;
    cursor:pointer;
    }

    #greybutton
    .entry a:hover:before {
    content:"";
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.5) url('http://naszetrendy.files.wordpress.com/2012/08/button-3442.gif') center center no-repeat;
    }

    and have assigned class in 1st post: #greybutton.

    ..still it doesn't work. What do I do wrong?

  6. I've also noticed that, as you mentioned it applies to all links.. so facebook and twitter links as well. Can I block this for those two links only?

    Yep. Try making the original example I posted juuust a bit more specific, like this:

    .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(http://s.wordpress.org/about/images/logos/wordpress-logo-stacked-rgb.png) center center no-repeat;
    }

    (Note that there's probably more than one way to do the same thing.) :)

  7. After adding this CSS the width of posted images has changed and the darkening is a bit bigger (to the right and down). How can I fit it?

    Hmm, try adding this:

    .entry img {
    	margin-bottom: 0;
    }

    Note that you should remove the #greybutton lines you added to Appearance → Custom Design → CSS. They're not formatted properly and are causing trouble. Also, using an extra class or ID probably could work to target the images, but it seems like a lot of extra work and I don't think they're needed if the only links in your posts are images that get the overlay treatment.

    The finished solution looks nice so far!

  8. You're amazing! It works just great :D

    I only had to change the width of images.

    Thank you very much :)

  9. Cheers :)

Topic Closed

This topic has been closed to new replies.

About this Topic