Necesito poner una imagen sobre otra imagen.

Este es mi código:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class = "row text-center" style="">
      <div class="col-xs-6 text-center" style="background-color:none; margin-top:10px;">
        <img src="1.jpg" width="250" height="250">
        <img src="plus.png" width="50px" height="50px">
      </div>
    </div>
  </body>
</html>

Llegó como:

cómo poner la imagen sobre la imagen en bootstrap;

Mi necesidad Real es el símbolo Más sobre la imagen, como esta:

cómo poner la imagen sobre la imagen en bootstrap;

InformationsquelleAutor Group | 2016-02-04

3 Comentarios

  1. 4

    Bien es probable que necesite para la posición de la segunda imagen con un "position: absolute" y, a continuación, centrar sobre la otra imagen mediante el establecimiento de

     margin-top: 50%;
     margin-left: 50%;
     transform: translate(-50%,-50%);

    No olvides que el contenedor debe tener position: relative para contener el "fixed" imagen.

  2. 5

    Probar este

    CSS:

    .product-holder {
        position: relative;
        display: block;
    }
    
    .plus-image {
        left: 50%;
        top: 50%;
        position: absolute;
        margin-top: -25px;
        margin-left: -25px;
    }

    HTML

    <div class = "row text-center" style="">
        <div class="col-xs-6 text-center" style="background-color:none; margin-top:10px;">
            <div class='product-holder'>
                <img src="1.jpg" width="250" height="250" class='product-image'>
                <img src="plus.png" width="50px" height="50px" class='plus-image'>
            </div>
        </div>
    </div>
  3. 1

    dar position:absolute en su icono…

    y moverlo en la imagen mediante el uso de css

    • Por favor proporcione el código… por Favor

Dejar respuesta

Please enter your comment!
Please enter your name here