Quiero superposición de una imagen con otro mediante el uso de CSS. Un ejemplo de esto es la primera imagen (en el fondo si te gusta) será una miniatura enlace de un producto, con el vínculo de la apertura de una caja de luz /ventana emergente que muestra una versión ampliada de la imagen.

En la parte superior de esta imagen vinculada me gustaría una imagen de una lupa, para mostrar a la gente que la imagen se puede hacer clic para ampliarla (al parecer, este no es evidente sin la lupa).

InformationsquelleAutor Robin Barnes | 2008-12-31

11 Comentarios

  1. 107

    Acabo de hecho haciendo esta cosa exacta en un proyecto. El HTML lado se veía un poco como esto:

    <a href="[fullsize]" class="gallerypic" title="">
      <img src="[thumbnail pic]" height="90" width="140" alt="[Gallery Photo]" class="pic" />
      <span class="zoom-icon">
          <img src="/images/misc/zoom.gif" width="32" height="32" alt="Zoom">
      </span>
    </a>

    A continuación, mediante el uso de CSS:

    a.gallerypic{
      width:140px;
      text-decoration:none;
      position:relative;
      display:block;
      border:1px solid #666;
      padding:3px;
      margin-right:5px;
      float:left;
    }
    
    a.gallerypic span.zoom-icon{
      visibility:hidden;
      position:absolute;
      left:40%;
      top:35%;
      filter:alpha(opacity=50);
      -moz-opacity:0.5;
      -khtml-opacity: 0.5;
      opacity: 0.5;
    }
    
    a.gallerypic:hover span.zoom-icon{
      visibility:visible;
    }

    Me dejó una gran cantidad de la muestra que hay en el CSS para que pueda ver cómo me decidí a hacer el estilo. Nota bajé la opacidad por lo que podía ver a través de la lupa.

    Espero que esto ayude.

    EDITAR: Para aclarar por su ejemplo, podría ignorar la visibility:hidden; y matar a los :hover la ejecución si quería, esto es simplemente la forma en que lo hice.

    • Sí, pensé que probablemente iba a terminar siendo un posicionamiento absoluto de la solución. La razón por la que me gusta esto es porque la imagen principal sigue siendo una imagen, que no se convierta en una imagen de fondo.
    • Tim K.: el código se ve bien, excepto por el CSS. El motor de lee CSS de derecha a izquierda. Cuando se utiliza ‘un.gallerypic’ aparece primero para ‘gallerypic’ y, a continuación, comprueba si ‘gallerypic’ tiene ‘un’ antepasado. Para solucionar esto, simplemente salir de la ‘a’, es lo que obtiene».gallerypic’. No hay necesidad de que el anterior ‘un’.
    • Hay un problema que sigue sin resolverse creo, que es que usted está obligado a usar display:block (mientras que las imágenes están en línea de forma predeterminada).
  2. 93

    Una técnica sugerida por este artículo, sería para hacer esto:

    <img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" />
    • Me pregunto si esto tiene algún impacto en términos de SEO
    • Matthieu, yo muy en duda.
    • el enlace no funciona ahora.
  3. 11

    Una manera muy simple de hacerlo que con CSS
    sólo sin modificar el contenido
    con etiquetas adicionales se muestra aquí
    (con el código y ejemplo):
    http://soukie.net/2009/08/20/typography-and-css/#example

    Esto funciona, siempre como el elemento primario no está utilizando la posición estática. Simplemente ajuste la posición relativa hace el truco. También, es decir, <8 no apoyo a la :antes de selector o contenido.

    • Esto realmente funciona muy bien, genial ser capaz de hacer esto sin cambiar el marcado a todos!!!!
    • Por favor, pega el código de esta dirección, en caso de que nunca se pone. Esto debe ser aceptado respuesta. El código es: p { position: relative; display: block; } p:after { content: url(magnificar.png); position: absolute; right: 20px; top: 20px;
  4. 3

    Aquí está cómo lo hice recientemente. No es perfecto, semánticamente, pero hace el trabajo.

    <div class="container" style="position: relative">
    <img style="z-index: 32; left: 8px; position: relative;" alt="bottom image" src="images/bottom-image.jpg">
    <div style="z-index: 100; left: 72px; position: absolute; top: 39px">
    <img alt="top image" src="images/top-image.jpg"></div></div>
  5. 3

    Usted puede ser que desee comprobar hacia fuera este tutorial:
    http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

    En que el escritor usa un vacío span elemento para agregar una superposición de imagen. Usted puede usar jQuery para inyectar dijo elementos span, si quieres mantener el código lo más limpio posible. Un ejemplo se da también en el citado artículo.

    Espero que esto ayude!

    -Dave

  6. 1

    Si solo quieren el magnifing de vidrio en hover, a continuación, puede utilizar

    a:hover img { cursor: url(glass.cur); }

    http://www.javascriptkit.com/dhtmltutors/csscursors.shtml

    Si quieres que de forma permanente se debe probablemente ya la han incluido en el original thumnail, o añadir el uso de JavaScript en lugar de añadirlo al HTML (esto es puramente de estilo y no debería estar en el contenido).

    Hágamelo saber si usted desea ayudar en el JavaScript del lado.

  7. 1

    Todo lo que quiero es de los padres sobre el niño. Esta es la manera de hacerlo.

    Poner img en span, establecer z-index & position para ambos elementos, y extra display del span. Agregar pase a span así que usted puede probar y lo consiguió!

    HTML:

    <span><img src="/images/"></span>

    CSS

    span img {
        position:relative;
        z-index:-1;
    }
    span {
        position:relative;
        z-index:initial;
        display:inline-block;
    }
    span:hover {
        background-color:#000;
    }
  8. 0

    A menos que usted use el <img> etiqueta, que muestra una imagen de sí mismo, usted no será capaz de lograr esto con puro CSS solo. Usted también necesitará DOS elementos HTML – uno para cada imagen. Esto es porque la única manera que usted puede hacer que un elemento se muestre una imagen a través de CSS es con el background-image de la propiedad, y cada elemento puede tener sólo una imagen de fondo. Que dos elementos que elija y de la posición que les corresponde a usted. Hay muchas maneras de cómo usted puede cambiar la posición de un elemento HTML encima de otro.

    • Si usted usa :antes de o :después de pseudo-selectores puede agregar html utilizando sólo javacript. Esta respuesta stackoverflow.com/a/3098231/272208 muestra un camino sin un segundo elemento html añadido al código fuente
  9. 0

    Aquí una buena técnica para mostrar una superposición de la imagen que se centra con una semi-transparente de fondo a través de un enlace de imagen:

    HTML

    <div class="image-container">
        <a class="link" href="#" >  
            <img class="image" src="/img/thumbnail.png"/>
            <span class="overlay-image"><img src="/img/overlay.png"></span>
        </a>    
    </div>

    CSS

    div.image-container{
        position: relative;
    }
    a.link{
        text-decoration: none;  
        position: relative;
        display: block;
    }
    
    a.link span.overlay-image{
        visibility: hidden;
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        right: 0px;
        background-color: rgba(0,0,0,0.2); /* black background with 20% alpha */
    }
    
    a.link span.overlay-image:before {    /* create a full-height inline block pseudo=element */
        content: ' ';
        display: inline-block;
        vertical-align: middle;  /* vertical alignment of the inline element */
        height: 100%;   
    }
    
    a.link:hover span.overlay-image img{
        display: inline-block;  
        vertical-align: middle;     
    }
    
    a.link:hover span.overlay-image{
        visibility: visible;
    }
  10. 0

    He aquí una de JQuery con Técnica de semi-fondo transparente.

    HTML

    <html>
    <head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <title>Image Gallery</title>
    </head>
    <body>
    <h1>Image Gallery</h1>
    <ul id="imageGallery">
    <li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li>
    <li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li>
    <li><a href="images/education.png"><img src="images/education.png" width="100" alt="Education by Chris Michel"></a></li>
    <li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
    <li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li>
    <li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li>
    <li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li>
    <li><a href="images/library.png"><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></a></li>
    <li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li>
    <li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></a></li>
    <li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li>
    </ul>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
    </body>
    </html>

    CSS

    /** Start Coding Here **/
    #overlay {
    background:rgba(0,0,0,0.7);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    display:none;
    text-align:center;
    }
    #overlay img {
    margin-top: 10%; 
    }
    #overlay p {
    color:white; 
    }

    app.js

    var $overlay = $('<div id="overlay"></div>');
    var $image = $("<img>");
    var $caption = $("<p></p>");
    //1. Capture the click event on a link to an image
    $("#imageGallery a").click(function(event){
    event.preventDefault();
    var imageLocation = $(this).attr("href");
    //1.1 Show the overlay.
    $overlay.show();
    //1.2 Update overlay with the image linked in the link
    $image.attr("src", imageLocation);
    //1.3 Get child's alt attribute and set caption
    var captionText = $(this).children("img").attr("alt");
    $caption.text(captionText);
    //2. Add overlay
    $("body").append($overlay);
    //2.1 An image to overlay
    $overlay.append($image);
    //2.2 A caption to overlay
    $overlay.append($caption);
    });
    //When overlay is clicked
    $overlay.click(function(){
    //Hide the overlay
    $overlay.hide();
    });

Dejar respuesta

Please enter your comment!
Please enter your name here