This is a simple task but nether the less worth documenting. The aim is to create a mask over the top of an image when hovering over them or selecting them.

The images above show the two states, the first the idle state and the second the border masked state. Obviously these are both images, however, this actual example will be carried out purely with CSS.
I have knocked up a quick demo of the Simple CSS Image Mask.
code
HTML Code
The HTML simply consists of a div container with a class of mask applied wrapping a linked image.
<a href="#">
<img alt="Image without mask" src="http://www.andrewsellick.com/wp-content/uploads/Image/tree.jpg" class="left" />
</a>
</div>
CSS Styles
The CSS is also fairly simple. Widths and heights are applied to the a tag. Active and hover states are then set on the a tag and the img tag. A border of six pixels is applied to the a tag and a width and height reduced by 12 pixels to cater for the extra size produced by the border and finally an overflow of hidden is applied to "mask" the image. The last step is pull the active image acroos to the left and up by 6 pixels to create the illusion that the image is being masked.
height:227px;
display:block;
width:150px;
}
.mask a:hover,
.mask a.active,
.mask a:active{
border:6px solid #646567;
width:138px;
height:215px;
overflow:hidden;
}
.mask a:hover img,
.mask a.active img,
.mask a:active img{
margin:-6px 0px 0px -6px;
}
.mask img{
border:0px;
}
demo
The demo can be found at the following link: Simple CSS Image Mask.


13 Comments Received
Hello! Help solve the problem.
Very often try to enter the site, but says that the password is not correct.
Regrettably use of remembering. Give like to be?
Thank you!
Foretag
kopa levitra
Hi everyone
Check out Very Funny Video :
http://www.youtube.com/watch?v=Z7jUnptjqZE
Bye
maik midlooks
Greetings
I shall do posts and to read this forum
comment_fashion
XRumer 4.0 is the best tool for advertisement!
It’s have CAPTCHA recognizer, email verificator, and a lot of other functions…
But. I forgot link to it
Can you give me link to the xrumer description? screenshots, etc.
Thank you
Nice forum!
Hi.
Good design, who make it?
subj
?
cancun teens lesbian lesbian nude cancun
down fit to pass endlessly viagra convenience lifeically fleetingly
locality endlessly viagra termically dollop while
Leave A Reply