I want to know what plugins is used on to chanege the color of image or make image response on mouse over.
I am new in wordpress can anyone give me the list of best plugins.
I am editing this theme:
http://themeforest.net/item/overgrowth-retina-responsive-multipurpose-theme/full_screen_preview/4896083
Please check this theme, in Homepage Scrolldown the page the "BLOG" Section will come
Please put mouse over the image then image will response.
I am looking for this.
I purchased this theme and I am editing it but I am not able to do this feature.
And I do not know this name what it says so I am not able to search on internet.
So please tell me what I will search what this say in WordPress. How can it be achieved via code or via plugins?
Does my overgrowth retina theme have this plugins?
Any Idea or Suggestions would be highly welcome.
This effect is being achieved with CSS3:
1] It's setting border-radius:100%; of the image container to change the image from a square to a circle.
2] It's also displaying two hidden elements over top of the image for the blue semi-transparent overlay. These are being set to opacity:0; for their default state, and then on :hover, they are being displayed using CSS transition.
3] They are using CSS3 transitions and trandsforms to deliver a smooth animation rather than the CSS styles just snapping into their :hover state.
Image Container :hover CSS:
.blog.blog_layout5 .span3 .post_grid_image a:hover > img, .blogging.post_grid .column.span3:hover .data-image > img, .blogging.post_grid .span3.four_column:hover .data-image > img {
border-radius: 100%;
transform: scale(1.08, 1.08);
}
Semi-Transparent Blue Circle Overlay :hover CSS:
.blogging.post_grid .span3 .preview_info_wrap, .blog.blog_layout5 .preview_info_wrap {
border-radius: 100%;
transform: scale(1.08, 1.08);
transition: opacity 0.2s ease 0s;
}
Icon Container Overlay (The Icon on top of the Blue Overlay) :hover CSS:
.blogging.post_grid .span3 .preview_info_wrap, .blog.blog_layout5 .preview_info_wrap {
border-radius: 100%;
transform: scale(1.08, 1.08);
transition: opacity 0.2s ease 0s;
}
Related
My button links are just links in the html with a background image in css. In the CSS I also have the dimensions of the image so that the whole thing is displayed.
I want the image to shrink to 95% whenever the mouse hovers over the image. I have the a:hover css but changing the dimensions to 95% there doesn't do it.
Is there an easy way to do this?
You can see the sample page at http://granthoneymoon.com/temp.html and the nav buttons are at the top inside the header.
This should work:
a { transition: transform 0.5s; }
a:hover { transform: scale(0.95); }
You can change 0.5 to whatever timing suits you best.
Also you would need to add specific -webkit-, -moz- and -o- prefix for older browser versions.
There is a navigation menu near the top of http://eaglesflight.sites.hubspot.com/conference for which I would like to have the parent items (TRAINING, COMPANY, RESOURCES) have transparent backgrounds, while maintaining the current opacity of the children on hover.
Essentially, I want to be able to see the background image behind the parent items of the navigation as opposed to the solid colour that is currently there.
I'm an amateur, tasked with doing some web development at work. Any help is greatly appreciated.
Remove background: #1d3d6f from the .nav-menu li and add it to .hs-menu-children-wrapper
for the hover, remove background: #fff from .nav-menu a:hover
If you don't set a background-color, you'll see whatever is behind the element.
...while maintaining the current opacity of the children on hover.
So seems like you already tryed to set a opacity to the element:
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children
{
position: relative;
opacity: 0.8;
}
Now indeed, the child elements also have this hover. This is because the parent element is "stronger". You can just re-adjust the opacity on hover:
.hs-menu-item.hs-menu-depth-1.hs-item-has-children:hover
{
opacity: 1;
}
jsFiddle
Note The COMPANY is not semi-transparent, because it has no child element. You can change this if you want by including the element with no children to the semi-transparent opacity
Hope this helped you :)
I am trying to make a toggle sidebar which animates.
When I try to hide the sidebar with CSS3 Transition property by adding a hidebar class, it works perfectly. But It's a toggle, and when I show it again, there is no transition. The menu just snaps out.
#page-content.hidebar {
transition: margin 0.3s ease;
margin-left: 0;
}
Can anyone suggest how can I have the transition property when I toggle the sidebar to visibility as well?
I am attaching a fiddle as an example.
http://jsfiddle.net/dxYCm/1/
You needed to do several things:
since all rules have been applied using id selectors in css, your class selector had no effect, as in css specificity it had low points to override previous rules specified under id. So you need to add !important. http://htmldog.com/guides/css/intermediate/specificity/ Learn more there...
You needed to put white-space:nowrap; as text/content of first div would curl up as div would get small.
Check it Out>>>
http://jsfiddle.net/techsin/dxYCm/5/
You don't need a hide class at all, jQuery has awesome built in features that do the same thing like .toggle() and .slideToggle!
Here's an example of .toggle
$("a#menu-trigger").click(function () {
$("#page-sidebar").toggle("fast");
$("#page-content").toggleClass("hidebar");
});
Also, you want to apply the transition to #page-content, not #page-content.hidebar so it transitions both expanding and contracting
If you do still want to do it with using a .hide class not changing the jQuery or the HTML, you can do it this way, by toggling the width and height
Relevant CSS for that:
.hide {height:0px; width:0px; color:transparent;}
#page-sidebar {width: 230px; float:left; transition: all 0.3s ease;}
I just found out that using CSS for button is better than the old Javascript mouseover. So I thought I'll give a try.
When I put the new code for rollover on the logo. I noticed when you move your mouse on the logo. The logo show "spinning" animate instead of "swapping" the image. I was wondering why it do that?
You can try by look at the link: http://www.streetlightministries.ca/2013 - move your mouse on the logo - you can see what I am talking about.
I hope you will be able to help me out.
Thanks!
Your problem lies probably in this CSS definition, which you apply to all <a> elements.
transition: all 0.5s ease 0s;
Together with the fact, that you are using sprites as images, the change in the part of the sprite, which is shown, is animated with a transition.
To overcome this either specify more detailed, which transitions should be animated or cancel out the transition for your logo using something like this:
#logo {
transition: none;
}
You have a 0.5s transition for all anchors set in the css. A fix would be
#logo {
transition: none;
}
It's because of the "transition". In your CSS, remove the transition elements from your anchors. Or, alternatively, add "transition:none" to #logo.
Why use transition: none? Just remove it!
Is there any way I can use CSS3 to fade in and out a solid white background of a <div>?
the content should remain visible so just the background should fade.
Any ideas using css3 transitions/transforms?
thank you for your help.
Sure, you can use the transition property directly on the background-color:
div {
background-color: white;
/* transition the background-color over 1s with a linear animation */
transition: background-color 1s linear;
}
/* the :hover that causes the background-color to change */
div:hover {
background-color: transparent;
}
Here's an example of a red background fading out on :hover.
You may find this useful for examples of image and background color fades: -
http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html
However using CSS 3 to do the transition will limit the effect to browsers that don't support it.
You could have two divs in one container div. The first div contains the white background, the second one gets the content.
Then, use a CSS3 transform to animate the opacity of the first div to zero.