Soy nuevo en bootstrap y gustaría ampliar todas las imágenes con la clase img-redondeado en hoverring

He implementado de esta manera:

<div class="container">
  <div class="row">
    <div class="span4">
      <div class="well">
        <img src="MyImage.png" class="img-rounded">
      </div>
    </div>
  </div>
</div>

<script>
  $( document ).ready(function() {
    $('.img-rounded').popover({
      html: true,
      trigger: 'hover',
      placement: 'bottom',
      content: function () {
        return 
          '<img class="img-rounded" style="float:right;width:500px;max-width:500px;" src="
          +$(this)[0].src + '" />';
      }
    });
  });

</script>

Lamentablemente el cuadro delimitador alrededor de la imagen ampliada no es agrandada. Cómo solucionar este problema?

  • ¿Tienes una demo que se puede comprobar?
InformationsquelleAutor Ruut | 2013-05-23

2 Comentarios

  1. 2

    Esto es causado por la popovers defecto max-width: 276px. Simplemente añadir

    <style type="text/css">
    .popover {
        max-width: 1000px;
    }
    </style>

    (o cualquier otro valor, el auto no funciona aquí) y en la ventana emergente se ajuste a la imagen.

  2. 1

    Usted puede hacer esto fácilmente usando sólo css.

    #img1{
    height:200px;
    }
    #img1:hover{
    height:400px;
    }

    También puede aplicar una serie de efectos adicionales según sea necesario, con mucho menos código.
    También puede administrar el div padre en consecuencia para que coincidan con esta regla de css. No TODAS las cosas requieren de JS.

Dejar respuesta

Please enter your comment!
Please enter your name here