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.
Related
I’m trying to display a different logo for a specific page on my website. I’ve added a CSS rule that targets the specific page id and it swaps the logo successfully but only on Chrome and Safari. But on Firefox and IE it doesn’t swap the logo (it just shows the original one)
.page-id-1973 #logo {content: url(http://example.com/wp-content/uploads/2017/04/new-logo.png) ;}
Could you tell me how to make it Firefox and IE compatible, or is there another way of achieving it?
Thanks
content is the wrong css property to use to apply an image to a node. That job belongs to background:
.page-id-1973 #logo {
background: url(http://example.com/wp-content/uploads/2017/04/new-logo.png);
}
You could also use background-image
If the image you are replacing is in the dom as an <img> tag you can do this to hide it and retain the height and width of the original:
.page-id-1973 #logo img { visibility: hidden; }
For a touch screen application it may be nice to have the custom cursor fade to opacity = 0 after the screen has not been touched for a while and jump back to opacity = 1 if the screen is touched again.
Is there a way to achieve this with just some css styling?
update: whether or not the cursor is displayed depends on the handling of the underlying system (in particular desktop). As I'm using just a browser on top of a bare X-Server, the cursor is always displayed.
While cursor: none is the easiest way to simply hide a cursor, it is also possible to create a cursor with opacity using a .png or .svg.
Here is an example snippet:
.transparent_cursor {
/* div appearance */
width: 128px; height: 128px; background-color: #def; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAF0lEQVQYlWNgYGD4j4YxAB0UDICVKAoAQagf4Vf1Xw0AAAAASUVORK5CYII=");
/* custom cursor */
cursor: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22pointer_cursor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2221px%22%20height%3D%2233px%22%20viewBox%3D%220%200%2021%2033%22%20enable-background%3D%22new%200%200%2021%2033%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20id%3D%22outer%22%20opacity%3D%220.5%22%20fill%3D%22%23FFFFFF%22%20points%3D%2220.2%2C20.2%2012.25%2C20.2%2016%2C29%209.667%2C31.75%205.75%2C22.5%200%2C28%200%2C0%20%22%2F%3E%3Cpolygon%20id%3D%22inner%22%20opacity%3D%220.5%22%20fill%3D%22%23231F20%22%20points%3D%226.373%2C19.482%201.75%2C23.904%201.75%2C4.225%2015.975%2C18.45%209.602%2C18.45%2013.708%2C28.087%2010.59%2C29.441%20%22%2F%3E%3C%2Fsvg%3E"), auto;
}
<div class="transparent_cursor"></div>
Keep in mind when designing:
The visible "pointer tip" of the image used should start in the upper
left corner.
If the image needs to be embedded within the CSS itself, you will need to base64 encode - or you can also URL encode for SVG. Using SVG without encoding did not work in my tests.
The resolution will be in CSS pixels, so it will look bad on Retina Display. This is true even if SVG is used, because browsers seems to want to want to rasterize in CSS pixels. Bummer.
A cursor fallback value such as , auto needs to be included after url(). Details here.
As for animating CSS URLs, I was able to find an example of how this can be achieved. Here's the gist of it:
#keyframes cursor_fade_out {
0% {cursor: url('cursor_opac100.svg'), auto}
25% {cursor: url('cursor_opac75.svg'), auto}
50% {cursor: url('cursor_opac50.svg'), auto}
75% {cursor: url('cursor_opac25.svg'), auto}
100% {cursor: url('cursor_opac0.svg'), auto}
}
So you will need to create an image for the cursor at each opacity level.
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;
}
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 have this slideshow with a overlay that pops up on hover, you can view it here. Just hover over any pictures below the 'featured' section. Works great in FF, Webkit, IE9. I made a separate stylesheet for less than IE9 and in it I have declared width, height, zoom, positioning, used all the filters that work in IE.... and I'm not getting opacity in either IE7 or IE8. The div with class overlay is appended with JQuery, is this a problem? Here is my css:
.overlay {
background-color:#fff;
filter:alpha(opacity=60);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
zoom:1;
width:160px;
height:20px;
z-index:50;
position:absolute;
bottom:0;
}
Your fading routine is adding an inline style that results in progid:DXImageTransform.Microsoft.Alpha(Opacity=60) which is overriding your filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65) in your css. It is typical for a fade routine to put an inline style, but you need to make sure that it either ends where you want it (with the 65% opacity) or it goes away after the fade so that the css is used (in Firefox it appears to be fading with an inline and then deleting the inline once done so that the style sheet opacity is picked up).
Edit (added info from comment on fading with jquery): If you are using .fadeIn() then try instead to use .fadeTo(400, 0.65) (see http://api.jquery.com/fadeTo), the 400 is the default duration for .fadeIn(), so you could change that, and the second number is the final opacity setting