Kb
Фото при наведении скрывается в полупрозрачном блоке с линками в центре (JQUERY)
html { min-height: 100%; } body { background-image: url(bg_lower.jpg); background-repeat: repeat-x; background-position: left bottom; min-height: 100%; } .wrapper { background-image: url(bg_upper.jpg); background-repeat: repeat-x; background-position: left top; } .tmplt-wrap{ display:inline; float: left; position: relative; margin-left: 0px; margin-right: 31px; margin-bottom:10px; } .tmplt-wrap.last{ margin-right:0; } .tmplt { padding:10px; background-color:#FFF; border: solid 1px #d1d1d1; box-shadow: 0px 1px 4px #d4d4d4; -moz-box-shadow: 0px 1px 4px #d4d4d4; -webkit-box-shadow: 0px 1px 4px #d4d4d4; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .tmpl-overlay{ position:absolute; z-index:101; top:11px; width:227px; height:300px; background-image: url(icons000.png); background-repeat: no-repeat; background-position: 0px -200px; } .tmplt-info { margin-top:5px; padding-left:11px; } .tmplt-info h6{ margin-bottom:0; font-size:11px; } .tmplt-info p{ color:#999;} .tmpl-overlay a { background-image: url(icons000.png); background-repeat: no-repeat; line-height:24px; display:block; padding-left:35px; margin-left:64px; } .tmpl-overlay a.preview { background-position: 0px -100px; } .tmpl-overlay a.preview:hover {background-position: -250px -100px;} .tmpl-overlay a.use-this { margin-top:42px; margin-bottom:2px; background-position: 0px -100px; } .tmpl-overlay a.use-this:hover {background-position: -250px -100px;} #wpcu3erWrapper { top:-30px; left:-30px; height:300px; }
Use this
Preview
Example 1
460x520
Use this
Preview
Example 2
840x361
Use this
Preview
Example 3
840x361