how can i have 2 hover in one image that behave different? - html

Question

i have an image in my website that when i mouse over it this goes left 105px:
.view img {
position: absolute;
z-index: 0;
transition:left 0.5s;
-webkit-transition:left 0.5s;
}
.view:hover img{
left: -105px;
}
i want to divide this "view" into 2 segments horizontally that every segment works different ,when mouse over one segment of the image then image goes left in 105px and another segment do it in another direction (right).i means writing something like this:
.view img {
position: absolute;
z-index: 0;
transition:left 0.5s;
-webkit-transition:left 0.5s;
}
.view:hover 25% right img{
left: -105px;
}
.view:hover 25% left img{
right: 105px;
}
how can i do this?

Answer 1

you can use :before and :after from css3
markup:
<div>hallo JAPAN</div>
style:
div{
position:relative;
width:100px;
height:80px;
background-color:#ccc;
margin:100px auto;
}
div:before,div:after{
content:'';
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
opacity:0;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
div:before{
background-color:red;
background-image:url(http://www.marcwitteveen.com/wp-content/uploads/2013/01/apple-logo.png);
background-repeat:no-repeat;
background-position:center;
}
div:after{
background-color:red;
background-image:url(http://mywindows8themes.com/wp-content/uploads/2011/11/windows_8_metro_logo.png);
background-repeat:no-repeat;
background-position:center;
}
div:hover:before{
left:-100%;
}
div:hover:after{
left:100%;
}
div:hover:before,div:hover:after{
opacity:1;
}
like this http://jsfiddle.net/nXdMn/