Hover Effects on Irregular Polygons in CSS

Hover effects on irregular polygons in CSS

Another self answer...

A few months ago I came across a library called Raphael JS - http://raphaeljs.com/. For those of you unfamiliar with it, it's an SVG DOM library first and foremost. If you know a thing or two about SVG, you'll know that IE doesn't support it, but it does support VML. Raphael caters for this as well. Awesome, right?

Anyway, I ended up saving the AI file for the map as an SVG file and importing the paths into a JSON block, basically doing the same thing as this code: http://raphaeljs.com/australia.html

The only issue I came across:

• I wanted the map background to be transparent. Setting fill to transparent whilst allowing the section to accept mouseover worked in Firefox, but in IE, it failed. I instead opted for filling the path with white, then setting the opacity to 0.01. After that I duplicated the path and didn't fill it to create the border.

How to create mouse hover effect to irregular shape on image map

You could try an working with an SVG vector image to select specific irregular shapes.

CSS would look like:

.shape:hover {
    fill: green;
}

and html SVG:

<svg version="1.0" width="291.000000pt" height="300.000000pt">

<g class="rabbit"fill="#000000" stroke="none"  transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)">

<path .../>

Example: http://codepen.io/phelpsiv/pen/rLYvrp

CSS custom shape with irregular rectangle and border

Use clip-path on pseudo elements. The trick is to consider the same clip-path and apply a scale transformation to one pseudo element to simulate the border. Simply adjust the value of the polygon to get the needed result.

Hover to see a different clip-path:

.parallelogram {   padding:20px 45px;   font-size:30px;   color: white;   border:none;   background:none;   outline:none;   position:relative;   z-index:0;   margin:15px;   filter:drop-shadow(0px 30px 25px rgba(236, 0, 244, 0.45));}.parallelogram:before,.parallelogram:after {   content:"";   position:absolute;   z-index:-1;   top:0;   left:0;   right:0;   bottom:0;   clip-path: polygon(0 11%, 100% 0, 90% 88%, 3% 96%);   transition:1s all;   background:#000;}.parallelogram:before {  background:#EC00F4;  transform:scale(1.05,1.12);}
.parallelogram:hover:before,.parallelogram:hover:after {   clip-path: polygon(5% 2%, 100% 5%, 100% 100%, 0% 94%);}

<button class="parallelogram"> Hello button </button><button class="parallelogram"> button </button><button class="parallelogram"> A </button>

Pattern of irregular clickable shapes

To make a pattern of irregular clickable polygons, you can use inline SVG with:

• the SVG link <a> element
• the polygon element to make the shapes

It will allow you to design any clickable shape and make them responsive.

Here is an example of what you can do with a hovered and focus state to make the shapes interactive:

svg {  display:block;  width:40%; height:auto;  margin:0 auto;}polygon {    fill:#ccc;  stroke:#fff; stroke-width:0.3;  transition: fill .15s;}a:hover .teal { fill:teal; }a:hover .pink { fill:pink; }a:focus .teal, a:focus .pink { fill:orange; }

<svg viewbox="0 0 20 19">  <a xlink:href="#"><polygon class="teal" points="0 0 10 5 8 10 0 5" /></a>  <a xlink:href="#"><polygon class="pink" points="0 0 10 5 15 0" /></a>  <a xlink:href="#"><polygon class="teal" points="0 5 8 10 0 15" /></a>  <a xlink:href="#"><polygon class="teal" points="15 0 10 5 20 19" /></a>  <a xlink:href="#"><polygon class="pink" points="20 19 10 5 8 10" /></a>  <a xlink:href="#"><polygon class="teal" points="20 19 8 10 0 15 8 13" /></a>  <a xlink:href="#"><polygon class="pink" points="20 19 0 19 0 15 8 13" /></a>  <a xlink:href="#"><polygon class="pink" points="15 0 20 19 20 20 20 0" /></a>  <a xlink:href="#"><polygon class="teal" points="20 17 18 16 16 17 17 20 20 20" /></a></svg>

Achieve irregular rectangular shape image masking in html css

For something like that, I would suggest two different possibilities:

• Using CSS transformations (in particular skewY); or
• Using SVG (with just some polygons)

Each of them has some good/bad things and will work in all the modern browsers and in mobile, as you can see in the caniuse.com website for transform and SVG.

Using CSS 2D Transformations

You would have a container div that would be skewed vertically, and then inside of it other divs with the skew (over)corrected. Then hiding the overflow so the excess of the contained divs is not shown.

You can see a demo here (or on this JSFiddle):

#skewed {    position:relative;    margin-top:20px; width: 500px; height: 300px;    transform: skewY(-2deg); -webkit-transform: skewY(-2deg); -moz-transform: skewY(-2deg); -o-transform: skewY(-2deg);    overflow:hidden;    background:black;    -webkit-backface-visibility: hidden;}
#skewed div {    position:absolute;    height:200px;    width:500px;    transform: skewY(4deg);    -webkit-transform: skewY(4deg); -moz-transform: skewY(4deg); -o-transform: skewY(4deg);    overflow:hidden;    opacity:0.4;    transition:all 0.5s;    z-index:1;    background-size:100% 100%;    -webkit-backface-visibility: hidden;}
#skewed div:hover {    opacity:1;    z-index:2;    background-size:110% 110%;}
#top {    top:-50px;    left:0;    background:url(http://lorempixel.com/1000/400/animals) no-repeat center center;}
#bottom {    top:150px;    left:0;    background:url(http://lorempixel.com/1000/400/people) no-repeat center center;}

<div id="skewed">    <div id="top"></div>    <div id="bottom"></div></div>

how to make hover effect like this site( grow gride on hover )

This is the answer, enjoy:

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.5,0); }

where grow is the class of Yours divs

Is it possible to style a mouseover on an image map using CSS?

CSS Only:

Thinking about it on my way to the supermarket, you could of course also skip the entire image map idea, and make use of :hover on the elements on top of the image (changed the divs to a-blocks). Which makes things hell of a lot simpler, no jQuery needed...

Short explanation:

• Image is in the bottom
• 2 x a with display:block and absolute positioning + opacity:0
• Set opacity to 0.2 on hover

Example:

.area {
    background:#fff;
    display:block;
    height:475px;
    opacity:0;
    position:absolute;
    width:320px;
}
#area2 {
    left:320px;
}
#area1:hover, #area2:hover {
    opacity:0.2;
}

<a id="area1" class="area" href="#"></a>
<a id="area2" class="area" href="#"></a>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/640px-Saimiri_sciureus-1_Luc_Viatour.jpg" width="640" height="475" />

---

Related Topics