خدمت شما
دموی آنلاین
<style>
@import url(لینک قابل نمایش نیست . لطفا
ثبت نام کنید و یا
وارد سایت شوید );
body { margin: 2em; }
.multi-hover {
position: relative;
font-family: Orbitron, sans-serif;
max-width: 500px;
max-height:200px;
line-height: 0;
overflow: hidden;
}
.multi-hover img {
max-width: 100%;
}
.multi-hover span {
position: absolute;
width: 100%;
height: 100%;
line-height: 1.5;
font-weight: 100;
text-align: center;
box-sizing: border-box;
font-size: 22px;
z-index: 2;
transition: .3s linear;
color: white;
padding: 15%;
opacity: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
.multi-hover span:hover { opacity: 1; }
.multi-hover span:nth-child(odd):hover { left: 0; z-index: 3; }
.multi-hover span:nth-child(odd).hover { left: 0; z-index: 1; }
.multi-hover span:nth-child(even):hover { top: 0; z-index: 3; }
.multi-hover span:nth-child(even).hover { top: 0; z-index: 1; }
.multi-hover span:nth-child(1) { /* right panel */
top: 0;
left: 90%;
background: hsla(0,70%,50%,0.6);
}
.multi-hover span:nth-child(2) { /* top panel */
top: -90%;
left: 0;
background: hsla(90,70%,50%,0.6);
}
.multi-hover span:nth-child(3) { /* left panel */
top: 0;
left: -90%;
background: hsla(180,70%,50%,0.6);
}
.multi-hover span:nth-child(4) { /* bottom panel */
top: 90%;
left: 0;
background: hsla(270,70%,50%,0.6); }
</style>
<div class=multi-hover>
<span>khodavakili</span>
<span>I Love khodavakili.ir</span>
<span>more css code :
<br>www.khodavakili.ir</span>
<span>khodavakili</span>
<img src="http://crypt3r.ir/img/demo/portfolio-3.png" alt="Photograph of NGC 1309">
</div>
</vb:if>
یه هاور از بالا هست یکی هم از پایین یه هاور هم از سمت چپ