Roll over

[dufredo]

Hello,

First of all thank you for your work. It's great. Also, i try to make a roll over but i can't. Maybe you can help me. I want to have a picture in the diamond and in a roll over want to have a backgound color with some text in the center (it can be an an image). How can i make it ?

This is my entry

<img src="<?php bloginfo('template_directory'); ?>/library/images/diamonds/branding.jpg" class="item">

Thank you very much and sorry for my english.

[mqchen]

Hi! Do you have any CSS for this case?

[dufredo]

No just the css i have downloaded from your files. I'm sorry. Do you understand what i want ?

Thank's for your answer.

[dufredo]

Hi, do you have any ideas ? This is the css i have. Thank you

.diamonds { text-align: center; overflow: visible; white-space: nowrap; display: inline-block; margin-bottom:190px; }

.diamond-row-wrap { text-align: center; position: relative; float: left; clear: both;

} .diamond-row-upper, .diamond-row-lower { overflow: auto; clear: both; width: 100%;

} .diamond-row-lower { overflow: visible; position: absolute; bottom: 0;

} .diamond-row-lower .diamond-box { margin-left: 64.644660941%; /* 0.5 + 1 / sqrt(2) / 2 */ margin-top: 64.644660941%;

}

.diamond-box-wrap { float: left; width: 250px; /* Size of diamonds */ height: 250px;

}

.diamond-box {

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

overflow: hidden;

position: relative;
z-index: 1;

width: 70.710678118%; /* x = sqrt(x^2 / 2) = 1 / sqrt(2) = 0.70710678118 */
height: 70.710678118%;
margin: 14.644660941%;

border: 1px solid transparent;  

}

.diamond-box-inner { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);

-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

width: 141.421356237%; /* sqrt(2) */
height: 141.421356237%;
margin: -20.7106781185% 0 0 -20.7106781185%; /* (1 - sqrt(2)) / 2 */
background:#333;
color:#fff;
font-size:26px;

}

.diamond-box-inner .nom:hover{ opacity:0.2; cursor: pointer;

}

.titre-interne {

position:absolute;
width:400px;
height:358px;
z-index: 999;

}

[mqchen]

Sorry for the late reply. I made an example for you here: http://jsfiddle.net/mqchen/84sPw/

The css you need is something like this:

.item {
    background-color: #eee;
    display: block;
    width: 100%;
    height: 100%;
}
.label {
    display: none;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.item:hover {
    background-color: #ccc;
}
.item:hover .label {
    display: block;
}

And a markup, that's something like this:

<a href="#" class="item"><span class="label">Hello world</span></a>

[dufredo]

Thank you very much. One more question, where can i put an image to display before the roll over

My exemple :

thank's a lot

[mqchen]

You could do like this: http://jsfiddle.net/mqchen/84sPw/1/

Add background-image on the .item-element. Additionally, if you want to scale the image you could use background-size: cover and if you want it centered you can use background-position: center center. Check out the demo.