WordPress.org

Ready to get started?Download WordPress

Forums

WP Image Borders
[resolved] Gradients and hover? (2 posts)

  1. Michael Aronoff
    Member
    Posted 10 months ago #

    The built in WordPress css for gallery image thumbnails uses css gradients and also has a hover change on the gradient for a nice visual effect.

    It would be really cool if you could add the gradients and a redundant set of options to style the a:hover.

    Here is the css so you can see the gradients I mean:

    .gallery-item img,img.size-thumbnail,img.size-one-third,img.size-one-third-p { border:1px solid #fff; background:#efefef; padding:9px; -moz-border-radius: 2px; -webkit-border-radius: 2px; box-shadow:0px 1px 3px rgba(0, 0, 0, .3); -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, .3); -moz-box-shadow:0px 1px 3px rgba(0, 0, 0, .3); background: -moz-linear-gradient(top, #fff, #efefef); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#efefef)); 	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#efefef)"; }
    .gallery-item img:hover,img.size-thumbnail:hover,img.size-one-third:hover ,img.size-one-third-p:hover{ -moz-border-radius: 2px; -webkit-border-radius: 2px; box-shadow:0px 0px 3px rgba(0, 0, 0, .3); -webkit-box-shadow:0px 0px 3px rgba(0, 0, 0, .3); -moz-box-shadow:0px 0px 3px rgba(0, 0, 0, .3); background: -moz-linear-gradient(top, #f9f9f9, #efefef); background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#efefef)); 	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f9f9f9, endColorstr=#efefef)"; }

    Thanks for the great plugin!

    https://wordpress.org/plugins/wp-image-borders/

  2. Ben Sibley
    Member
    Plugin Author

    Posted 10 months ago #

    Thanks for the feedback, that's an interesting idea. I'll try to implement something like that in the next release.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.