<div id="contenido-plano">
    <div id="plano">
        <img class="img-sensor" src="@ViewBag.Plano.Imagen" />
        @foreach (var Sensor in ViewBag.Sensores)
        {
            <div style="top:@(Sensor.PosY)px; left:@(Sensor.PosX)px;" class="sensor ui-corner-all ui-state-highlight" data-id="@Sensor.Id">
                <div class="info">
                    @Sensor.Nombre
                    <br />
                    <a title="Editar Sensor" id="editar-sensor" onclick="EditarSensor(@Sensor.Id)"   ><i class="glyphicon glyphicon-edit"></i></a>
                    <a title="Eliminar Sensor" id="elimnar-sensor"  onclick="EliminarSensor(@Sensor.Id)"><i class="glyphicon glyphicon-erase"></i></a>
                </div>
                <img src="/Content/IMG/sensor_verde.png" width="20" />
            </div>

        }
    </div>
</div>

.info {
    opacity: 0;
    position: absolute;
    left: calc(100% + 1em);
    top: 45%;
    font-size: .8em;
    padding: 0.1em 4em;
    border-radius: 2.2em;
    font-family: arial;
    background: #BFBFBF;
    color: white;
    transition: all ease .3s;
    transform: translateX(-57%) translateY(-50%);
}

.sensor:hover .info {
    opacity: 2;
    transform: translateX(-58%) translateY(-158%);
    z-index: 1000;
}

.img-sensor {
    position: absolute;
    height: 600px;
    width: 800px;
    max-height: 600px;
    max-width: 900px;
}

.sensor {
    position: absolute;
    z-index: 1;
}

#plano {
    position: relative;
    height: 600px;
    width: 800px/9;
    max-width: 800px;
    border: 1px ridge;
    border-color: gainsboro;
    overflow: hidden;
    margin:auto;
}