Welcome to Sitepoint
That’s actually not that straight forward.
I imagine you want the rollover to happen whenever you’re in one of the regions. This isn’t straight forward as all of the blocks that make up a web page are square and your shapes are angular. if the hit targets aren’t a problem and you’re ok having square targets then you’d need to save the three parts as png’s with transparency so you can overlap them, you could use absolute positioning for this.
Then it’s just switching out the background images when you hover as normal.
Only the coloured sections will be active - apart from the circle which is an image but I supposed I could have used border-radius but I believe some browsers include the missing corners as a target area anyway when border-radius is used unlike the transform.
I added the matrix filter transform for IE8 and IE7 but it doesn’t work too well and you would be better off just using a normal image for IE8-.
That looks really good. The circle thing doesnt really bother me too much, but i will eventually do something about it.
Im not very experienced with coding, i’ve only done websites within photoshop as of yet. Is it possible i can maybe borrow that piece of code, and if so, how do i do it?
If you just "view source " from your browser you will get the source code and you can just copy and paste.
Here it is anyway:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Irregular rollover using css transform</title>
<style type="text/css">
.logo, .logo a {
width:400px;
height:200px;
display:block;
overflow:hidden;
position:relative;
}
.logo b {
float:left;
width:200px;
height:200px;
background:url(images/k-logo.png) no-repeat 0 100%;
z-index:3;
position:relative;
}
.logo b:hover{ background-position:0 0 }
.logo span{
width:200px;
height:200px;
overflow:hidden;
float:left;
position:relative;
}
.logo span span {
background:#666;
height: 400px;
position: absolute;
right: 72px;
top: -210px;
width: 400px;
z-index: 2;
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.logo i i{
position:absolute;
right:0;
bottom:0;
width:200px;
height:100px;
overflow:hidden;
}
.logo i i {
background:#999;
height: 200px;
position: absolute;
right:0;
top: 142px;
width: 200px;
z-index: 2;
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.logo span span:hover,.logo i i:hover { background:#f70 }
</style>
<!--[if lte IE 8]>
<style type="text/css">
.logo i i {
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.7071067811865474,
M12=-0.7071067811865477,
M21=0.7071067811865477,
M22=0.7071067811865474,
SizingMethod='auto expand');
top:100px;
right:40px;
}
.logo span span {
/* IE8+ - must be on one line */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.7071067811865483,
M12=0.7071067811865467,
M21=-0.7071067811865467,
M22=0.7071067811865483,
SizingMethod='auto expand');
top:-365px;
right:82px;
}
</style>
<![endif]-->
</head>
<body>
<div class="logo"><a href="#"><b></b><span><span></span></span><i><i></i></i></a></div>
</body>
</html>
The css should go in an external css file making sure to update the path names correctly. The IE8- conditional comments should also call an IE only css file.
The main css goes in the main css file and the IE only css goes inside the IE only css file. (Remember not to place the style tags in the external css file.)
