juanres

If the cube is directly inside the container:

  #container:hover > #cube { background-color: yellow; }

If cube is next to (after containers closing tag) the container:

  #container:hover + #cube { background-color: yellow; }

If the cube is somewhere inside the container:

juanres

item {
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    position: absolute;
}

juanres

item {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

juanres

/* CONDICIONAL  pantalla pequeña */
 @media only screen and (max-width : 1280px){

 }

juanres

/* CONDICIONAL  pantalla grande */
 @media only screen and (min-width : 1920px){
 	
 }

juanres

/* CONDICIONAL  pantalla portatil */
 @media only screen and (max-width : 1224px){
}

juanres

.abajo {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #f00;
}

juanres

.arriba {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid black;
}

juanres

.derecha {
	width: 0; 
	height: 0; 
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid green;
}

juanres

.izquierda {
	width: 0; 
	height: 0; 
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent; 
	border-right:20px solid blue; 
}