I'm sure this is a pretty simple one but can't find the specific answer I'm looking for elsewhere.
Basically, I have a series of side by side images set out in a responsive grid layout. As you hover over each image it zooms and scales the image bigger so it looks like it's coming out towards you.
However, the issues I have is that the later image always overlaps the prior image. I have tried setting all the divs containing the image to the same z-index but to no avail.
I have setup a js.fiddle which demonstrates the issue. I'm hoping to solve with purely CSS.
JSfiddle link http://jsfiddle.net/Aloha_Design_Co/46poxw9j/
Any ideas would be most appreciated.
Thanks,
Heath
Simply, give more z-index in .photo-content:hover.
.photo-content:hover {
background-size: 120%;
/* in conjuction with the transition below it zooms in on the background image - doesn't change box size in itself; */
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
transform: scale(1.2);
/* expands the box to look like it is 3D coming out of page */
/* Add z-index */
z-index: 10;
}
Jsfiddle
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;
}
Recently I was playing around with a custom modal and I was having difficulty with dismissing it.
Basically there is an anchor tag with an absolute position placed on a div with a relative position. Css hover styles were not applied to it when the mouse was clearly above the anchor also the click event was not being fired.
Examples:
Defective Dismiss Anchor
Working Dismiss Anchor
The difference between these two examples is in the css
In the defective case the following styles are present
.modalDialog
{
/* ... */
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target
{
opacity: 1;
pointer-events: auto;
}
In the working examples all of these styles have been removed, but everything else stays the same.
My original assumptions about z-index being the culprate proved to be untrue, also I am doubting that fixed and relative positions are to blame (unconfirmed), it looks like opacity is to blame.
I realize why the removed styles are not needed, but I don't understand why they were preventing the hover and click events from firing?
An explanation would be appreciated.
It's the pointer-events: none that causes the problem.
This property controls how elements respond to mouse events, in this case hover and click.
It looks like it's tried to be overridden on the :target selector, but this won't work in this case, because .modalDialog:target means 'when the url is #modalDialog'. But, that .modalDialog doesn't have an ID so it can't be a target anyway.
From CSS tricks:
The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.
This is a fiddle update with just the pointer-events CSS rules removed, and it works.
http://jsfiddle.net/zPgj8/11/
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;}
In my CSS I defined a transition for a class. For some reason, when I hover over the class with the transition, the transition-duration for some reason alters the font color elsewhere (form placeholders and certain links). (This happens only in Safari as far as I can tell.)
Here's a jsFiddle that shows what I'm talking about:
http://jsfiddle.net/EJUhd/
Does anyone know why this occurs and how I can prevent it?
I was struggling with a similar issue.
For me, random links throughout the page became apparently bold (clearly something to do with OSX and anti-aliasing in Safari, as Chrome (in windows 7 and OSX) as well as the same version of Safari in Windows worked fine.
The solution is not obvious, and depending on what you are doing might not be optimal, but adding this line of code fixed the issue:
-webkit-transform: translateZ(0);
This basically triggers the GPU to do animation, and the text no longer had artifacts in my site. Do note that it's not always appropriate to use it, as it may use more battery life and use more resources. Sometimes however, it uses less, so basically check the performance when you add it.
You add this to the normal state not the :hover animated state.
img { -webkit-transform: translateZ(0); }
As opposed to on the:
img:hover { /* not here */ }
The other very positive side effect is that depending on the animation you are doing, it might be smoother through the GPU. So you won't get the choppy animation you mention in your follow up post. In my case, the animation was more seamless in safari. I was doing a 120% scale and 5 degree rotation of an image with some box-shadow appearing at the same time. In my situation, it did not reduce CPU usage unfortunately.
There is no more relevant topic I've found for a problem I had, but that's related to mentioned above issue. So, might be helpful for some one.
In two words: I have some container (popup), some element inside.
Appearing goes the following way: container background is fading up to dark via opacity and element inside is scaling up (like coming closer to us from behind). Everything works great everywhere but not in Safari (Mac/Win/iPhone). Safari "initially" shows my container, but it blinks some strange way (tiny short flash appears).
Only adding -webkit-transform: translateZ(0); (to container!!!) did help.
.container {
-webkit-transform: translateZ(0); /* <-- this */
}
.container section {
-webkit-transform: translateZ(0) scale(.92); /* <-- and I added translate here as well */
-webkit-transition: -webkit-transform .4s, opacity .3s;
opacity:0;
}
.container.active section {
-webkit-transform:translateZ(0) scale(1);
-webkit-transition: -webkit-transform .3s, opacity .3s;
opacity:1;
}
But speaking of the transitions, there was also the following part of code:
.container {
...
top:-5000px;
left:-5000px;
-webkit-transition: opacity .5s, top 0s .5s, left 0s 5s, width 0s 5s, height 0s 5s;
}
.container.active {
-webkit-transition: opacity .5s;
top:0;
left:0;
width:100%;
height:100%;
}
considering, that I want to show/hide the popup using only css switching (and also to make it disappear nicely instead just "display:none").
so, somehow on appearing Safari (obviously) was inheriting transition properties besides "opacity" even as I've overloaded them with only -webkit-transition: opacity .5s;
so, adding the following solved the problem:
.container {
...
-webkit-transition: opacity .5s, top 0s 0s, left 0s 0s, width 0s 0s, height 0s 0s;
}
I can't begin to tell you why it's doing this, but Safari isn't changing your text color, it's anti-aliasing the text differently while the transition is in motion. The text edges get smoother, and the text itself becomes thinner. This is extra obvious if you zoom in on the fiddle with accessibility tools. At some smaller sizes, the shading around the button next to the form text shifts too. (Is it possible that Safari is redrawing some things, or reorienting them on a sub-pixel level during the transitions ? Somebody explain this please, it's driving me nuts now!)
Because I have no real idea why it's doing this either, these might not be the best solutions:
Depending on what you're transforming, replacing the css transform with a javascript animation will probably fix it.
For example in your fiddle, the problem also occurred with a scale transformation, but not with a similar jQuery animate function.
There seem to be some shades and styles where the anti-aliasing change is less obvious (at least in the fiddle), so you could also try styling the placeholders and other effected text differently.
(This thread may help with styling the placeholders, if you go that route: Change an HTML5 input's placeholder color with CSS )
Thanks to the identification of anti-aliasing above, as well as help from the articles below, I modified my code to include translate3d(0,0,0) and the problem disappeared:
-webkit-transition-duration: .17s, .17s translate3d(0,0,0);
The transition isn't as smooth as it once was but that's a subject for another question.
Wonky text anti-aliasing when rotating with webkit-transform in Chrome
http://johanbrook.com/design/css/a-fix-for-antialiasing-issues-in-webkit-browsers/
http://www.webkit.org/blog/386/3d-transforms/
i had the same problem, while a transition some text became antialiased. this happen only in anchor text that are positioned relative e with z-index inside an element positioned and with z-index itself.
if i remove all position and index the problem disappear.
There is a similar problem using transition and translate3d. Sometimes any element on the page with :hover styles shows its hover behavior. I have this problem using a slider. Put the -webkit-transform: translateZ(0); to the :hover element and its behavior is normal.
For rotation() maybe it's fine, but for scale() It didn't worked the -webkit-transform: translateZ(0); formula.
I used :
-webkit-font-smoothing: antialiased;