below is my code:
HTML
<div id="wrapper" style="background-color:red">
<div id="sidebar-wrapper" style="background-color:yellow">sidebar
<div id="result"></div>
</div>
<div id="header" class="container-fluid">
<div class="navbar">
<a href="#menu-toggle" id="menu-toggle" >Press</a>
<div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span></div>
</div>
</div>
</div>
CSS
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y:auto;
background: #050545;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
JS
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
The jsfiddle is below:
JSFIDDLE
As you guys can see, it is a sidebar slide to the right when I press the link. It kinda squeeze the content on the right side of the screen when I press it.
What I want is the the right side of the content to slide to the right to go behind the screen, not squeeze all content together. Any ideas?
Give fixed width as the width of the viewport to the #wrapper element.
Use vw to set the width.
1/100th of the width of the viewport.
#wrapper {
...
width: 100vw; // vw: Viewport width when page is loaded
}
More about vw
Demo
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 100vw;
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #050545;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="wrapper" style="background-color:red">
<div id="sidebar-wrapper" style="background-color:yellow">sidebar
<div id="result"></div>
</div>
<div id="header" class="container-fluid">
<div class="navbar"> Press
<div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span>
</div>
</div>
</div>
</div>
Related
I have a <div> that contains a link.
At the bottom right corner of this <div>, I have an overlay element which takes over the whole <div> when hovered.
This overlay element also contains a link.
My problem is that the link in the overlying element is not clickable.
The problem is because I use pointer-events: none; on class .overlay-content, but if I don't use it, both links become dead.
Please see code here:
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.amg-corner-button_wrap:hover~.overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Also, here is fiddle.
Is there any way that I can achieve this?
can't believe I actually found a pure CSS solution without any drawbacks.
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.wrap:hover .amg-corner-button_wrap {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.wrap:hover .amg-corner-button_wrap ~ .overlay-content {
pointer-events: auto;
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class="wrap">
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
</div> <!-- panel body -->
</div> <!-- panel default -->
JSFiddle
Instead of listening to the :hover event on the corner-button, listen to it on a parent element. Since the :hover will be dispatched regardless of the mouse interaction of the elements' children, it is possible to set pointer-events: auto to the children containing links (overlay-content), once the corner-button has been hovered. Now, that the overlay-content is hoverable and since it's a child of the wrapping div, it will cause the :hover to stay active over the whole wrapping div.
I would recommend using JS style swapping instead of CSS pointer events for this problem. You need to trigger one change to your css when you mouse over the bottom corner, and a separate event when you mouse out of the container. I do not believe CSS gives you that kind of conditional control.
Here is half a solution using animations instead of transitions. This works for when you hover on to the amg-corner-button_wrap but not when you move off it. I'm a bit new to animations so hopefully someone here who knows more maybe able to help you with the second half.
There is also a weird visual in here if you hover on the amg-corner-button_wrap and hover off mid transition. The reason for this is that I added a background color to overlay-content so when it's fading in and you mouse off amg-corner-button_wrap the swipe starts to reverse before the fade is complete.
Anyway, hope this 50% solution helps you or others drive this to 100%! Have to run to a meeting, good luck :-)
#keyframes example {
0% {
visibility: hidden;
opacity: 0;
}
1% {
visibility: visible;
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 200px;
width: 200px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -120px;
bottom: -120px;
width: 200px;
height: 200px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.overlay-content {
visibility: hidden;
opacity: 0;
background-color: #e8c63d;
bottom: 0;
color: #333;
left: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.overlay-content~.amg-corner-button_wrap,
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.amg-corner-button_wrap:hover~.overlay-content,
.overlay-content:hover {
animation-name: example;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-delay: 0.3s;
animation-fill-mode: both;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Here's a working fiddle for a css and html only change: https://jsfiddle.net/y2auh7gn/4/.
It separates the link from overlay-content and places it where it's supposed to be with position: absolute. We need to move the link out of overlay-content so that when we hover over it the overlay doesn't disappear.
There's a side-effect where the link pops out with the corner piece.
I'm trying to put overlay on my form. Basically I don't want user to access the form and just block the content by adding overlay. I added overlay but I can still give inputs in input fields. How do I stop that?
.overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
opacity: 0;
width: 100 %;
height: 100 %;
-webkit-transition: all 0.3s ease - in -out;
-moz-transition: all 0.3s ease - in -out;
-o-transition: all 0.3s ease - in -out;
-ms-transition: all 0.3s ease - in -out;
transition: all 0.3s ease - in -out;
opacity: 1;
}
<h1>Hello Plunker!</h1>
<div class="overlay">
<input type="text">First name
</div>
Like this?
.content {
text-align: center;
opacity: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition: all 0.3s ease - in -out;
-moz-transition: all 0.3s ease - in -out;
-o-transition: all 0.3s ease - in -out;
-ms-transition: all 0.3s ease - in -out;
transition: all 0.3s ease - in -out;
opacity: 1;
}
.overlay {
background: rgba(0, 0, 0, .75);
position: absolute;
width: 100%;
height: 100%;
}
<h1>Hello Plunker!</h1>
<div class="content">
<div class="overlay">
</div>
<input type="text">First name
</div>
Hope this helps.
Try this
.wrapper {
position: relative;
}
.overlay{
position: absolute;
width: 100%;
height: 100%;
}
.form-wrapper {
text-align: center
}
<div class="wrapper">
<div class="overlay"></div>
<div class="form-wrapper">
<input type="text">First name
</div>
</div>
A very simple & efficient way of doing this without extra & unnecessary divs is using ::after pseudo class.
It makes layering very easy.
HTML
<div class="form">
First name
<input type="text">
</div>
CSS
.form{
width:300px; /*Or what ever width you choose*/
height:400px; /*Or what ever height you choose*/
position: relative;
z-index:1;
}
.form:after{
position:absolute;
height: 100%;
width:100%;
content:'';
z-index:5; /* Make sure this value is higher than the .form class */
top:0;
left:0;
}
This is should do it :)
Here is a fiddle for a working demo.
i am using this example http://jsfiddle.net/MJTkk/2/ in order to find where the cursor is(left or right in my example). i also have two images and i want the second.png to hover over the other smoothly but to hover on the direction of the cursor(follow the cursor).
<div class="box" id="box" style="margin:100px 0px 0px 100px">
<a href="#" target="_blank">
<div class="under_div"></div>
<div class="over_div"></div>
</a>
</div>
.box {
position:relative;
width:100px;
height:100px;
}
.under_div
{
background-size: 100px 100px;
height: 100%;
width: 100%;
position: absolute;
background-image:url(http://s30.postimg.org/dd01lyrjx/first.png);
background-repeat: no-repeat;
background-position: top right;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.over_div
{
background-size: 100px 100px;
height: 100%;
position: absolute;
background-image:url(http://s21.postimg.org/wjrhdklar/second.png);
background-repeat:no-repeat;
background-position: top left;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.box:hover .over_div
{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
i implement this http://jsfiddle.net/9yj8or2z/1/ because i do not know how to explain it correctly. sorry for my english.
i see that it does not work properly and the div moves when hover for some reason. if someone could help i will appreciate it!
You should remove your css code in the jquery function completely for .under_div
i updated your FIDDLE if this is what you want to achieve.
EDIT i updated the fiddle once again. you got to give the over_div if it's coming from the right (so in the else tag in the first function) a position: absolute; right: 0; left: auto; and in the second function right: auto; left: 0;
FIDDLE NO 2 BOTH DIRECTIONS WORKING
ask if you got any further questions, but this should be it!
If your problem is that the grey png is moving too on hover, I think that this solution works.
$(function() {
$("#box").hover(function(e) {
var el_pos = $(this).offset();
var edge = closestEdge(e.pageX - el_pos.left, e.pageY - el_pos.top, $(this).width(), $(this).height());
$('.under_div').css({
"left":"0",
"width":"100px",
"background-position":"100% 0%"
});
$('.over_div').css({
"left":"0",
"width":"0px",
"background-position":"0% 0%"
});
if(edge=='left')
{
$('.over_div').css({
"left":"0",
"width":"100px",
"background-position":"0% 0%"
});
}
else
{
$('.over_div').css({
"left":"0px",
"width":"100px",
"background-position":"100% 0%"
});
}
}, function(e) {
var el_pos = $(this).offset();
var edge = closestEdge(e.pageX - el_pos.left, e.pageY - el_pos.top, $(this).width(), $(this).height());
if(edge=='left')
{
$('.over_div').css({
"left":"0px",
"width":"0px",
"background-position":"0% 0%"
});
}
else
{
$('.over_div').css({
"left":"100px",
"width":"0px",
"background-position":"100% 0%"
});
}
});
});
function closestEdge(x,y,w,h) {
var leftEdgeDist = distMetric(x,y,0,h/2);
var rightEdgeDist = distMetric(x,y,w,h/2);
var min = Math.min(leftEdgeDist,rightEdgeDist);
switch (min) {
case leftEdgeDist:
return "left";
case rightEdgeDist:
return "right";
}
}
function distMetric(x,y,x2,y2) {
var xDiff = x - x2;
var yDiff = y - y2;
return (xDiff * xDiff) + (yDiff * yDiff);
}
.box {
position: relative;
width: 100px;
height: 100px;
}
.under_div {
background-size: 100px 100px;
height: 100%;
width: 100%;
position: absolute;
background-image: url(http://s30.postimg.org/dd01lyrjx/first.png);
background-repeat: no-repeat;
background-position: top right;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.over_div {
background-size: 100px 100px;
height: 100%;
position: absolute;
background-image: url(http://s21.postimg.org/wjrhdklar/second.png);
background-repeat: no-repeat;
background-position: top left;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.box:hover .over_div {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="box" style="margin:100px 0px 0px 100px">
<a href="#" target="_blank">
<div class="under_div"></div>
<div class="over_div"></div>
</a>
</div>
I fixed some issues with it: http://jsfiddle.net/9yj8or2z/2/
By adding left: 0; and width: 0px; to CSS, and also adding overflow:hidden;, I could fix that the gray box was moving at the beginning wrongly, but still animates.
I hope this is what you were looking for :)
I created a small box while slides to the left and then to the bottom to present the content after hovering the box: http://jsfiddle.net/7n9jxo9c/3/
Now I need to change it in a way, that the box slides to the left and the opens to the top. So the content should be placed above the X.
HTML:
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
Content
</div>
</div>
JS:
$(document).on('mouseenter', '.item', function( event ) {
var menue = $('#item_add');
var item = $(this);
menue.css({ "top": item.offset().top + 35 }).show();
});
CSS:
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
left: 5.5em;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
-webkit-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-moz-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-ms-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-o-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
}
#item_add:hover {
width: 7em;
left: .5em;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
#item_add:hover .body {
max-height: 100px;
visibility: visible;
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
#item_add .body {
max-height: 0;
overflow: hidden;
visibility: hidden;
-webkit-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-moz-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-ms-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-o-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
}
#item_add:after {
content: '';
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
use Bottom on #item_add:after instead of Top : http://jsfiddle.net/7n9jxo9c/9/
#item_add:after {
content: '';
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
bottom: 5px;
right: -7px;
position: absolute;}
I am not sure if I fully understand your question, but I think you can use bottom attribute instead of top.
I mean something like this:
http://jsfiddle.net/7n9jxo9c/8/
I'm currently working on this site http://66.147.244.95/~crossfy6/ and I found some open source code for animated icons in circles and revised it for my main menu icons.
Unfortunately, it wasn't until after making it in chrome (if you view it in chrome it works perfectly) I did test it in another browsers and found out that the greyscale filter I used isn't supported in IE and Safari.
I'm wondering if there are any other ways I can accomplish this effect. I thought of creating another set of icon pictures that were grey and transitions them on hover, but the only way to do that would be to rewrite the bulk of the menu since there all set as img's and not backgrounds to divs that I can change with css. Any other thoughts? Or do I basically need to start over? I know the basics of jquery and javascript but not how to implement them with wordpress, which is what I'm using.
HTML
<div class="gridcontainer clearfix">
<div class="grid_3">
<div class="fmcircle_out">
<a href="http://66.147.244.95/~crossfy6/about/">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_red">
<span style="width:110px;" >ABOUT</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/red-question-mark-e1394408760835.png" style="padding-right:5px; width:63px;" alt="" />
</div>
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="http://66.147.244.95/~crossfy6/wod/">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_red">
<span style="width:128px;">WOD</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/red-kettlebell-icon.png" style="width:80px" alt="" />
</div>
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="http://66.147.244.95/~crossfy6/nutrition/">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_red">
<span style="width:124px;">NUTRITION</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/apple.png" style="width:80px" alt="" />
</div>
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="http://66.147.244.95/~crossfy6/rates-and-fees/">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_red">
<span>RATES</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/red-wallet.png" style="margin-top:27px" alt="" />
</div>
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="http://66.147.244.95/~crossfy6/schedule/">
<div class="fmcircle_border">
<div class="fmcircle_in fmcircle_red">
<span style="padding-left: 5px;">SCHEDULE</span><img src="http://66.147.244.95/~crossfy6/wp-content/uploads/2014/03/red-calendar.png" alt="" />
</div>
</div>
</a>
</div>
</div>
And the CSS:
/* -- Circular Work -- */
.gridcontainer {
width: 960px;
margin: 0px auto;
}
.grid_3 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 50px;
width: 170px;
}
.grid_9 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 700px;
}
.fmcircle_out {
width: 138px;
height: 138px;
background-color:#dd2027;
text-align: center;
display: block;
margin-left: 10px;
opacity: 1;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.fmcircle_out:hover {
opacity: 1;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
/*
.fmcircle_out:hover .fmcircle_in img {
margin: 20px;
width: autopx;
height: 90px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
*/
.fmcircle_in {
width: 130px;
height: 130px;
margin: 4px;
display: inline-block;
overflow: hidden;
-webkit-filter: grayscale(100%);
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.fmcircle_out:hover .fmcircle_in {
width: 130px;
height: 130px;
margin: 4px;
display: inline-block;
overflow: hidden;
-webkit-filter: grayscale(0%);
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.fmcircle_in img {
border: none;
margin: 23px;
width: auto;
height: 85px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.fmcircle_in span {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
width: 120px;
background: none;
color: #000;
font-size:20px;
padding: 0px;
margin: 52px 0 0 0px;
height: 20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
float: left;
position: absolute;
opacity: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
any and all help/insight appreciated! thanks!
Create a file named filters.svg with the following contents:-
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
Add css code
.fmcircle_in{
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
.fmcircle_out:hover .fmcircle_in {
filter: none;
-webkit-filter: grayscale(0);}
add following to css code for IE
.fmcircle_in span {filter: alpha(opacity=0);}
.fmcircle_out:hover .fmcircle_in span{filter: alpha(opacity=100);}